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

interface SelectFieldProps {
  id: string;
  name: string;
  options: readonly SelectOption[];
  required?: boolean;
  value?: string;
}

export function SelectField(
  { id, name, options, required = false, value }: SelectFieldProps,
) {
  return (
    <select
      id={id}
      name={name}
      required={required}
      value={value}
      class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
    >
      {options.map((option) => (
        <option value={option.value}>{option.label}</option>
      ))}
    </select>
  );
}