import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { useAuthStore } from '@/store/authStore';
import ForbiddenPage from '@/pages/errors/ForbiddenPage';
import { Skeleton } from '@/components/ui/skeleton';

interface Props {
    allowedRoles?: string[];
}

const ProtectedRoute: React.FC<Props> = ({ allowedRoles }) => {
    const { isAuthenticated, isInitialized, user } = useAuthStore();

    if (!isInitialized) {
        return (
            <div className="flex min-h-screen items-center justify-center gap-3 p-8">
                <Skeleton className="h-10 w-10 rounded-full" />
                <Skeleton className="h-4 w-40" />
            </div>
        );
    }

    if (!isAuthenticated) {
        return <Navigate to="/login" replace />;
    }

    if (allowedRoles && user && !allowedRoles.includes(user.role)) {
        return <ForbiddenPage />;
    }

    return <Outlet />;
};

export default ProtectedRoute;