"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

export function LogoutButton({ className = "", redirectTo = "/login" }: Readonly<{ className?: string; redirectTo?: string }>) {
  const router = useRouter();
  const [isLoggingOut, setIsLoggingOut] = useState(false);

  async function handleLogout() {
    setIsLoggingOut(true);
    await fetch("/api/v1/auth/logout", { method: "POST" });
    router.replace(redirectTo);
    router.refresh();
  }

  return (
    <button className={className} disabled={isLoggingOut} onClick={handleLogout} type="button">
      {isLoggingOut ? "Signing out..." : "Logout"}
    </button>
  );
}