"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Copy, Loader2 } from "lucide-react";

export function CloneBotButton({ botId }: { botId: string }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  async function handleClone() {
    if (!confirm("Cloneaza acest bot? Va fi creat ca Draft.")) return;
    setLoading(true);
    const res = await fetch(`/api/bots/${botId}/clone`, { method: "POST" });
    const data = await res.json();
    setLoading(false);
    if (data.id) router.push(`/bots/${data.id}`);
  }

  return (
    <button
      onClick={handleClone}
      disabled={loading}
      title="Cloneaza botul"
      className="flex items-center gap-1.5 text-xs text-slate-500 hover:text-indigo-300 bg-white/[0.03] hover:bg-indigo-500/10 border border-white/[0.07] hover:border-indigo-500/25 px-3 py-2 rounded-xl transition-all font-medium disabled:opacity-50"
    >
      {loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Copy className="w-3.5 h-3.5" />}
      Cloneaza
    </button>
  );
}