"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { setVacationAllowanceAction } from "@/lib/actions/vacation";

export function VacationAllowanceForm({ clientId, value }: { clientId: string; value: number | null }) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <label className="flex flex-col gap-1 text-xs">
      <span className="text-[var(--rk-ink-muted)]">Urlaubstage-Kontingent (pro Jahr)</span>
      <input
        type="number"
        step="1"
        min="0"
        defaultValue={value ?? ""}
        placeholder="Tage/Jahr"
        disabled={pending}
        onBlur={(e) => {
          const data = new FormData();
          data.set("vacationDaysPerYear", e.target.value);
          startTransition(async () => {
            await setVacationAllowanceAction(clientId, data);
            router.refresh();
          });
        }}
        className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm"
      />
    </label>
  );
}