/**
 * SelectField
 *
 * Field wrapper around a native select.
 *
 * @package Everyone_Accessibility_Suite
 */

import Field from './Field';

function SelectField({ id, label, description, value, options, onChange, disabled = false }) {
	return (
		<Field id={id} label={label} description={description}>
			<select
				id={id}
				value={value}
				onChange={(e) => onChange(e.target.value)}
				disabled={disabled}
			>
				{options.map((opt) => (
					<option key={opt.value} value={opt.value}>
						{opt.label}
					</option>
				))}
			</select>
		</Field>
	);
}

export default SelectField;