import { useModels, modelOptions } from "../hooks";

/** Model picker; keeps unknown current values selectable. */
export function ModelSelect({ value, onChange, title, emptyLabel }: { value: string; onChange: (v: string) => void; title?: string; emptyLabel?: string }) {
  const options = modelOptions(useModels());
  const known = options.some((o) => o.value === value);
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)} title={title}>
      {emptyLabel !== undefined && <option value="">{emptyLabel}</option>}
      {!known && value && <option value={value}>{value}</option>}
      {options.map((o) => (
        <option key={o.value} value={o.value}>
          {o.label}
        </option>
      ))}
    </select>
  );
}