import { Navigate, Outlet } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import Unauthorized from '@/modules/public/pages/Unauthorized'
import { useEffect } from 'react'

export default function ProtectedRoute({ allowedRoles = [] }) {
  const { user, loading } = useAuth()  // ← just loading and user, nothing else

  if (loading) return null  // ← only block on initial cold load

  if (!user) return <Navigate to="/login" replace />

  if (allowedRoles.length > 0 && !allowedRoles.includes(user.acc_type)) {
    return <Unauthorized />  // ← show unauthorized instead of redirecting
  }

  return <Outlet />
}