"use client";

import { useState } from "react";
import { Loader2 } from "lucide-react";

export function KycStartButton() {
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");

  async function start() {
    setLoading(true);
    setMessage("");
    const response = await fetch("/api/kyc/cases", { method: "POST" });
    const payload = await response.json();
    setLoading(false);
    setMessage(payload.ok ? "Vérification lancée. Suivez les instructions affichées." : payload.error?.message ?? "Vérification indisponible");
  }

  return (
    <div>
      <button onClick={start} className="mt-5 inline-flex items-center gap-2 rounded-lg bg-felt px-4 py-2 font-black text-ink-950">
        {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
        Démarrer la vérification
      </button>
      {message ? <p className="mt-3 text-sm font-semibold text-slate-300">{message}</p> : null}
    </div>
  );
}