import {RadioControl} from '@wordpress/components';
import FieldControl from '../components/FieldControl';

const RadioField = ( {field, value, onChange} ) => {
	// Transform the options in the format expected by RadioControl
	const radioOptions = Object.entries( field.options || {} ).map( ( [optionValue, optionLabel] ) => ({
		value: optionValue,
		label: optionLabel
	}) );

	return (
		<FieldControl
			label={field.label}
			id={field.id}
			help={field.description}
		>
			<RadioControl
				selected={value}
				options={radioOptions}
				onChange={( newValue ) => onChange( field.id, newValue )}
			/>
		</FieldControl>
	);
};

export default RadioField;