Projects/front/src/components/AuthGuard.tsx

// src/components/AuthGuard.tsx
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "@/context/AuthContext";
import { Loader2 } from "lucide-react";

interface AuthGuardProps {
  children: React.ReactNode;
  requiredRole?: "admin" | "author" | "user";
  fallbackPath?: string;
}

export default function AuthGuard({
  children,
  requiredRole,
  fallbackPath = "/login",
}: AuthGuardProps) {
  const { user, isLoading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (isLoading) return;
    if (!user) {
      navigate(fallbackPath, { replace: true });
      return;
    }
    if (requiredRole && user.role !== requiredRole && user.role !== "admin") {
      navigate("/dashboard", { replace: true });
    }
  }, [isLoading, user, requiredRole, navigate, fallbackPath]);

  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    );
  }

  if (!user) return null;
  if (requiredRole && user.role !== requiredRole && user.role !== "admin") return null;

  return <>{children}</>;
}