"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { setBirthDateAction } from "@/lib/actions/team";

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

  return (
    <label className="flex flex-col gap-1 text-xs">
      <span className="text-[var(--rk-ink-muted)]">Geburtsdatum</span>
      <input
        type="date"
        defaultValue={value}
        disabled={pending}
        onChange={(e) => {
          const data = new FormData();
          data.set("birthDate", e.target.value);
          startTransition(async () => {
            await setBirthDateAction(clientId, data);
            router.refresh();
          });
        }}
        className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm"
      />
    </label>
  );
}