"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";
import { useAuth } from "@/lib/auth-context";

export default function LogoutPage() {
  const router = useRouter();
  const { logout } = useAuth();

  useEffect(() => {
    async function handleLogout() {
      try {
        // Use the auth context to logout
        await logout();

        // Note: The auth context handles clearing localStorage and redirecting
      } catch (error) {
        console.error('Logout error:', error);
        // Even if there's an error, still redirect to login
        router.push('/auth/login');
      }
    }

    handleLogout();
  }, [router]);

  return (
    <div className="flex min-h-screen flex-col items-center justify-center p-4 text-center">
      <Loader2 className="mb-4 h-8 w-8 animate-spin text-primary" />
      <h1 className="mb-2 text-xl font-semibold">Déconnexion en cours...</h1>
      <p className="text-muted-foreground">Vous allez être redirigé vers la page de connexion.</p>
    </div>
  );
}