'use client'

import { useSession, signOut } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/Button'
import { User, LogOut } from 'lucide-react'

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}`}
      >
        {session.user?.avatar ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img 
            src={session.user.avatar} 
            alt="Avatar" 
            className="w-10 h-10 rounded-full object-cover"
          />
        ) : (
          <User className="w-6 h-6" />
        )}
      </Button>
      <Button
        onClick={() => signOut({ callbackUrl: '/login' })}
        variant="ghost"
        size="sm"
        className="p-1 h-auto"
        title="Déconnexion"
      >
        <LogOut className="w-4 h-4" />
      </Button>
    </div>
  )
}