import React, { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useSession } from 'next-auth/react';
import Loader from '@/components/Loader'; // Importez le composant Loader
import { FE_USERS_LOGIN_URL } from '@/utils/Url';

const ProtectedRoute = ({ children, requiredRight }) => {
  const { data: session, status } = useSession({
    required: true,
    onUnauthenticated() {
      router.push(`${FE_USERS_LOGIN_URL}`);
    }
  });
  const router = useRouter();

  // Ne vérifier que si le statut est définitif
  if (status === 'loading') {
    return <Loader />;
  }

  // Vérifier si l'utilisateur a au moins un rôle correspondant au requiredRight
  const hasRequiredRight = session?.user?.roles?.some(role => role.role_type === requiredRight);

  if (session && requiredRight && !hasRequiredRight) {
    router.push(`${FE_USERS_LOGIN_URL}`);
    return null;
  }

  // Autoriser l'affichage si authentifié et rôle correct
  return session ? children : null;
};

export default ProtectedRoute;