import { Navigate } from 'react-router-dom'
import { useAuth } from '../../context/AuthContext'
import { PageLoader } from './Spinner'
import Layout from './Layout'

export function ProtectedRoute({ children, role }) {
  const { user, loading } = useAuth()
  if (loading) return <Layout><PageLoader /></Layout>
  if (!user) return <Navigate to="/login" replace />
  if (role === 'admin' && user.role !== 'admin') return <Navigate to="/dashboard" replace />
  if (role === 'aspirant' && !['admin', 'aspirant', 'user'].includes(user.role)) return <Navigate to="/pending" replace />
  return children
}

export function GuestRoute({ children }) {
  const { user } = useAuth()
  if (user) {
    if (user.role === 'admin') return <Navigate to="/admin" replace />
    if (user.role === 'aspirant' || user.role === 'user') return <Navigate to="/dashboard" replace />
    return <Navigate to="/pending" replace />
  }
  return children
}