"use client";

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

export default function DeleteButton({ playerId }: { playerId: string }) {
  const router = useRouter();
  const [confirm, setConfirm] = useState(false);

  async function handleDelete() {
    await fetch(`/api/players/${playerId}`, { method: "DELETE" });
    router.push("/admin/players");
    router.refresh();
  }

  if (confirm) {
    return (
      <div className="flex gap-2">
        <button onClick={handleDelete} className="bg-red-600 text-white px-4 py-2 rounded-xl text-sm hover:bg-red-700">
          تأیید حذف
        </button>
        <button onClick={() => setConfirm(false)} className="bg-gray-200 px-4 py-2 rounded-xl text-sm hover:bg-gray-300">
          انصراف
        </button>
      </div>
    );
  }

  return (
    <button onClick={() => setConfirm(true)} className="text-red-500 hover:text-red-700 text-sm font-medium">
      حذف بازیکن
    </button>
  );
}
