"use client";

import { useTransition } from "react";
import { setServiceStatusAction } from "@/lib/actions/services";
import { SERVICE_STATUSES, type ServiceStatus } from "@/lib/orderConstants";

const LABELS: Record<ServiceStatus, string> = {
  available: "Verfügbar",
  on_request: "Auf Anfrage",
  unavailable: "Nicht verfügbar",
};

export function ServiceStatusSelect({ id, status }: { id: string; status: ServiceStatus }) {
  const [pending, startTransition] = useTransition();

  return (
    <select
      value={status}
      disabled={pending}
      onChange={(e) => startTransition(() => setServiceStatusAction(id, e.target.value as ServiceStatus))}
      className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2.5 py-1.5 text-xs disabled:opacity-50"
    >
      {SERVICE_STATUSES.map((s) => (
        <option key={s} value={s}>
          {LABELS[s]}
        </option>
      ))}
    </select>
  );
}