import type { ReactNode } from "react";
import { translateReactNode, usePlatformLanguage } from "../../i18n/LanguageContext";

type Option = {
  id: string;
  label: ReactNode;
  description?: ReactNode;
  disabled?: boolean;
};

export default function AdminSelectionList({
  options,
  selected,
  onChange,
  emptyText = "i18n:govoplan-core.no_options_available.a88ab045"





}: {options: Option[];selected: string[];onChange: (next: string[]) => void;emptyText?: string;}) {
  const { translateText } = usePlatformLanguage();
  if (!options.length) return <p className="muted small-note">{translateText(emptyText)}</p>;
  const selectedSet = new Set(selected);
  return (
    <div className="admin-selection-list">
      {options.map((option) =>
      <label key={option.id} className={`admin-selection-item ${option.disabled ? "disabled" : ""}`}>
          <input
          type="checkbox"
          checked={selectedSet.has(option.id)}
          disabled={option.disabled}
          onChange={(event) => {
            const next = new Set(selectedSet);
            if (event.target.checked) next.add(option.id);else
            next.delete(option.id);
            onChange(Array.from(next));
          }} />
        
          <span>
            <strong>{translateReactNode(option.label, translateText)}</strong>
            {option.description && <small>{translateReactNode(option.description, translateText)}</small>}
          </span>
        </label>
      )}
    </div>);

}
