"use client";

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

export function DepartmentColorPicker({ id, color }: { id: string; color: string }) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <input
      type="color"
      defaultValue={color}
      disabled={pending}
      title="Farbe ändern"
      onChange={(e) => startTransition(async () => { await updateDepartmentColorAction(id, e.target.value); router.refresh(); })}
      className="w-7 h-7 shrink-0 bg-transparent border border-white/15 rounded-md disabled:opacity-50"
    />
  );
}