import Link from "next/link";
import type { Expert } from "../../lib/experts";

// Experts koppelen aan een ronde; dezelfde koppeling als op de pagina Experts
export function ExpertCheckboxes({ experts, selected = [] }: { experts: Expert[]; selected?: number[] }) {
  return (
    <fieldset className="sm:col-span-3 flex flex-col gap-2">
      <legend className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Experts</legend>
      {experts.length === 0 ? (
        <p className="text-sm text-zinc-500">
          Er zijn nog geen experts.{" "}
          <Link href="/experts" className="underline hover:text-rikx-orange-dark">
            Expert uitnodigen
          </Link>
        </p>
      ) : (
        <div className="flex flex-wrap gap-x-5 gap-y-2">
          {experts.map((e) => (
            <label key={e.id} className="flex items-center gap-2 text-sm text-zinc-800 dark:text-zinc-200">
              <input
                type="checkbox"
                name="expert_ids"
                value={e.id}
                defaultChecked={selected.includes(e.id)}
                className="accent-rikx-orange"
              />
              {e.name}
              {!e.actief && <span className="text-xs text-zinc-500">(uitgenodigd)</span>}
            </label>
          ))}
        </div>
      )}
      <span className="text-xs text-zinc-500">
        Gekoppelde experts zien de projecten van deze ronde zodra die in waardebepaling staan.
      </span>
    </fieldset>
  );
}