frontend/src/components/ProtectedRoute.tsx

import { Navigate, Outlet, useLocation } from "react-router-dom";

import type { UserRole } from "@/lib/auth";
import { useAuth } from "@/hooks/useAuth";

type ProtectedRouteProps = {
    allowedRoles?: UserRole[];
};

export function ProtectedRoute({ allowedRoles }: ProtectedRouteProps) {
    const { isAuthenticated, role, dashboardPath } = useAuth();
    const location = useLocation();

    if (!isAuthenticated) {
        return (
            <Navigate to="/login" replace state={{ from: location.pathname }} />
        );
    }

    if (allowedRoles && !allowedRoles.includes(role)) {
        return <Navigate to={dashboardPath} replace />;
    }

    return <Outlet />;
}