"use client";

import { signOut } from "next-auth/react";
import { useState } from "react";

interface LogoutButtonProps {
  label?: string;
  className?: string;
}

export default function LogoutButton({
  label = "Sign Out",
  className = "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition",
}: LogoutButtonProps) {
  const [isLoading, setIsLoading] = useState(false);

  const handleLogout = async () => {
    setIsLoading(true);
    try {
      // Sign out and redirect to the sign-in page (defined as "/" in route.ts)
      await signOut({ callbackUrl: "/" });
    } catch (error) {
      console.error("Logout failed:", error);
      setIsLoading(false);
    }
  };

  return (
    <button
      onClick={handleLogout}
      disabled={isLoading}
      className={`${className} ${
        isLoading ? "opacity-50 cursor-not-allowed" : ""
      }`}
    >
      {isLoading ? "Signing Out..." : label}
    </button>
  );
}