"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import type { Locale } from "@/i18n/routes";
import { getDict } from "@/i18n/dictionaries";

export function LogoutButton({ locale }: { locale: Locale }) {
  const dict = getDict(locale);
  const router = useRouter();
  const [busy, setBusy] = useState(false);

  async function onClick() {
    setBusy(true);
    try {
      await fetch("/api/admin/logout", { method: "POST" });
      router.push("/admin/login");
      router.refresh();
    } finally {
      setBusy(false);
    }
  }

  return (
    <button
      type="button"
      onClick={onClick}
      disabled={busy}
      className="border border-hairline bg-transparent px-3 py-1 font-mono text-xs uppercase text-muted hover:border-accent hover:text-accent disabled:opacity-50"
    >
      {dict.admin.logout}
    </button>
  );
}
