"use client"

import { signOut } from "next-auth/react"
import { useTranslations } from "next-intl"
import { LogOut } from "lucide-react"

interface LogoutButtonProps {
  variant?: "icon" | "full"
  className?: string
}

export function LogoutButton({
  variant = "full",
  className = "",
}: LogoutButtonProps) {
  const t = useTranslations("auth")

  async function handleLogout() {
    // Call backend to revoke the token (best-effort)
    try {
      await fetch("/api/backend/auth/logout", { method: "POST" })
    } catch {
      // Ignore — sign out client-side regardless
    }

    await signOut({ callbackUrl: "/login" })
  }

  if (variant === "icon") {
    return (
      <button
        onClick={handleLogout}
        className={`inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground ${className}`}
        title={t("logout")}
        aria-label={t("logout")}
      >
        <LogOut className="h-4 w-4" />
      </button>
    )
  }

  return (
    <button
      onClick={handleLogout}
      className={`inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground ${className}`}
    >
      <LogOut className="h-4 w-4" />
      <span>{t("logout")}</span>
    </button>
  )
}
