"use client";

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

export default function ActivateRoundButton({ roundId, isActive }: { roundId: string; isActive: boolean }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  async function toggleActivation() {
    setLoading(true);
    await fetch(`/api/rounds/${roundId}/activate`, { method: "POST" });
    router.refresh();
    setLoading(false);
  }

  return (
    <button onClick={toggleActivation} disabled={loading}
      className={`px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-50 ${
        isActive 
          ? "bg-gray-200 text-gray-600 hover:bg-gray-300" 
          : "bg-blue-600 text-white hover:bg-blue-700"
      }`}>
      {loading ? "..." : isActive ? "غیرفعال" : "فعال‌سازی"}
    </button>
  );
}
