"use client";

import { useTransition } from "react";
import { LogOut } from "lucide-react";

export function LogoutButton({ className }: { className?: string }) {
  const [isPending, startTransition] = useTransition();

  function logout() {
    startTransition(async () => {
      await fetch("/api/auth/logout", {
        method: "POST",
        credentials: "same-origin",
        cache: "no-store",
      });
      window.location.href = "/";
    });
  }

  return (
    <button onClick={logout} disabled={isPending} className={className || "btn-duo btn-duo-white gap-2 text-xs flex items-center justify-center"}>
      <LogOut size={16} className={className ? "mr-1.5" : ""} />
      {isPending ? "Signing out..." : "Sign out"}
    </button>
  );
}