"use client";

// Mehrfach-Auswahl von Mitarbeiter:innen als Checkbox-Chips. Gleicher `name`
// auf allen Checkboxen ⇒ das Formular sendet alle angehakten Werte (getAll).
export function TodoPeoplePicker({
  name,
  staffList,
  defaultIds = [],
}: {
  name: string;
  staffList: { id: string; name: string }[];
  defaultIds?: string[];
}) {
  return (
    <div className="flex flex-wrap gap-1.5">
      {staffList.map((s) => (
        <label
          key={s.id}
          className="flex items-center gap-1.5 rounded-lg border border-white/15 px-2 py-1 text-xs text-[var(--rk-ink-muted)] has-[:checked]:border-[var(--rk-accent)]/60 has-[:checked]:text-[var(--rk-ink)]"
        >
          <input
            type="checkbox"
            name={name}
            value={s.id}
            defaultChecked={defaultIds.includes(s.id)}
            className="h-3 w-3"
          />
          {s.name}
        </label>
      ))}
    </div>
  );
}