"use client";

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

export default function ClientPortalLogoutButton({
  slug,
  className = "",
}: {
  slug: string;
  className?: string;
}) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  async function handleLogout() {
    if (loading) return;
    setLoading(true);
    try {
      await fetch("/api/client-portal/logout", {
        method: "POST",
        headers: { "content-type": "application/json" },
      });
    } finally {
      router.push(`/${slug}/cliente/login`);
      router.refresh();
    }
  }

  return (
    <button
      type="button"
      onClick={handleLogout}
      disabled={loading}
      className={`inline-flex h-11 items-center justify-center gap-2 border border-zinc-200 bg-white px-5 text-sm font-medium text-zinc-700 shadow-sm transition hover:-translate-y-0.5 hover:border-zinc-300 hover:text-zinc-950 disabled:opacity-60 ${className}`}
    >
      <LogOut className="h-4 w-4" />
      {loading ? "Saindo..." : "Sair"}
    </button>
  );
}