import { SelectControl, RadioControl } from '@wordpress/components';

const SelectField = ({ field, value, onChange }) => {
	const options = Object.entries(field.options || {}).map(([key, label]) => ({ label, value: key }));

	if (field.type === 'radio') {
		return (
			<RadioControl
				label={field.label}
				help={field.description}
				selected={value}
				options={options}
				onChange={onChange}
				id={field.name}
			/>
		);
	}

	return (
		<SelectControl
			label={field.label}
			help={field.description}
			value={value ?? ''}
			options={[{ label: '— Select —', value: '' }, ...options]}
			onChange={onChange}
			id={field.name}
		/>
	);
};

export default SelectField;