import { Navigate } from 'react-router-dom'
import { useRolePermissions } from '../contexts/RolePermissionsContext'

interface Props {
  permission: string
  children: React.ReactNode
}

/**
 * Protects a route by permission key.
 * - While permissions are loading from DB: renders nothing (no flash).
 * - If user lacks the permission: redirects to their role's home page.
 */
export function PermissionGuard({ permission, children }: Props) {
  const { can, loading, userHomePage } = useRolePermissions()

  if (loading) return null

  if (!can(permission)) {
    return <Navigate to={userHomePage} replace />
  }

  return <>{children}</>
}