"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ROUTES } from "@/config/routes.config";

export function LogoutButton() {
  const [loading, setLoading] = useState(false);

  async function logout() {
    setLoading(true);
    try {
      await fetch("/api/auth/logout", { method: "POST" });
    } catch {
      // ignore — even if the API fails we still want to leave.
    }
    // Hard navigation so server components re-render with no session.
    window.location.href = ROUTES.login;
  }

  return (
    <Button
      type="button"
      variant="secondary"
      onClick={logout}
      isLoading={loading}
    >
      {loading ? "Signing out…" : "Sign out"}
    </Button>
  );
}