"use client";

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

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

  async function update(newStatus: string) {
    setLoading(true);
    await fetch(`/api/bookings/${bookingId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status: newStatus }),
    });
    setLoading(false);
    router.refresh();
  }

  if (status === "CANCELLED") return null;

  return (
    <div className="flex gap-1.5">
      {status === "PENDING" && (
        <button onClick={() => update("CONFIRMED")} disabled={loading}
          className="text-xs px-2.5 py-1 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/20 rounded-lg transition-all font-medium disabled:opacity-50">
          Confirma
        </button>
      )}
      <button onClick={() => update("CANCELLED")} disabled={loading}
        className="text-xs px-2.5 py-1 bg-white/[0.04] border border-white/[0.08] text-slate-500 hover:text-red-400 hover:border-red-500/20 rounded-lg transition-all font-medium disabled:opacity-50">
        Anuleaza
      </button>
    </div>
  );
}