'use client';

import { useSession, signOut } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/Button';
import { Emoji } from '@/components/ui/Emoji';
import { Avatar } from '@/components/ui/Avatar';

export function AuthButton() {
  const { data: session, status } = useSession();
  const router = useRouter();

  if (status === 'loading') {
    return (
      <div className="text-[var(--muted-foreground)] text-sm">
        Chargement...
      </div>
    );
  }

  if (!session) {
    return (
      <Button onClick={() => router.push('/login')} size="sm">
        Se connecter
      </Button>
    );
  }

  return (
    <div className="flex items-center gap-1">
      <Button
        onClick={() => router.push('/profile')}
        variant="ghost"
        size="sm"
        className="p-1 h-auto"
        title={`Profil - ${session.user?.email}`}
      >
        <Avatar
          url={session.user?.avatar}
          email={session.user?.email}
          name={session.user?.name}
          size={40}
          className="w-10 h-10"
        />
      </Button>
      <Button
        onClick={() => signOut({ callbackUrl: '/login' })}
        variant="ghost"
        size="sm"
        className="p-1 h-auto"
        title="Déconnexion"
      >
        <Emoji emoji="🚪" />
      </Button>
    </div>
  );
}
