// <SelectField> — a labelled `<select>`, `TextField`'s sibling for the
// "pick one of these" shape (the hive-choice dropdown the create-agent
// form needs is the motivating caller). Options are plain
// value/label pairs, not `ComponentChildren` — every real caller so far
// has flat string options, and generic children would need a second
// primitive (`SelectField.Option`) for zero real benefit today.
import { FormField } from '../form-field/FormField.js';

export interface SelectOption {
  value: string;
  label: string;
}

export function SelectField({
  id,
  label,
  value,
  onChange,
  options,
  required,
  disabled,
  placeholder,
}: {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  options: SelectOption[];
  required?: boolean;
  disabled?: boolean;
  // Rendered as a disabled, always-first `value=""` option — for a
  // required select with no default (e.g. a multi-hive roster: no
  // single right answer to pre-select), so the control shows something
  // other than silently landing on whatever option happens to be first.
  // Omit when the field always has a real default (`value` never `''`).
  placeholder?: string;
}) {
  return (
    <FormField label={label} htmlFor={id}>
      <select
        id={id}
        class="ui-form-control"
        value={value}
        required={required}
        disabled={disabled}
        onChange={(e) => onChange((e.target as HTMLSelectElement).value)}
      >
        {placeholder !== undefined && (
          <option value="" disabled>
            {placeholder}
          </option>
        )}
        {options.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
    </FormField>
  );
}