// Controlled lane chooser. The board owns selection and all fetch state.
const LaneSwitcher = ({ lanes = [], selectedLaneId, loading = false, error = null, onChange }) => {
  if (loading) return <div role="status" className="text-sm text-neutral-500">Loading lanes</div>;
  if (error) return <div role="alert" className="text-sm text-red-700">Unable to load lanes</div>;
  if (!lanes.length) return <div className="text-sm text-neutral-500">No lanes configured</div>;
  return (
    <label className="inline-flex items-center gap-2 text-sm font-semibold text-neutral-700">
      <span className="sr-only">Lane</span>
      <select aria-label="Lane" value={selectedLaneId || ''} onChange={(event) => onChange?.(event.target.value)} className="rounded-lg border border-neutral-300 bg-white px-3 py-2">
        {lanes.map((lane) => <option key={lane.id} value={lane.id}>{lane.name || lane.id}</option>)}
      </select>
    </label>
  );
};
window.LaneSwitcher = LaneSwitcher;