import { BaseControl, Button } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';

const PRESETS = [
	{ value: 'none', label: 'None' },
	{ value: 'sm', label: 'Small' },
	{ value: 'md', label: 'Medium' },
	{ value: 'lg', label: 'Large' },
	{ value: 'pill', label: 'Pill' },
];

export default function RadiusPreset( { label, value, onChange, help, disabled } ) {
	const id = useInstanceId( RadiusPreset, 'wuppi-radius-preset' );

	return (
		<BaseControl id={ id } label={ label } help={ help } __nextHasNoMarginBottom>
			<div className={ `wuppi-radius-preset-row${ disabled ? ' is-disabled' : '' }` }>
				{ PRESETS.map( ( preset ) => (
					<Button
						key={ preset.value }
						variant={ value === preset.value ? 'primary' : 'secondary' }
						onClick={ () => ! disabled && onChange( preset.value ) }
						className="wuppi-radius-preset-button"
						aria-disabled={ disabled || undefined }
						tabIndex={ disabled ? -1 : undefined }
					>
						{ preset.label }
					</Button>
				) ) }
			</div>
		</BaseControl>
	);
}
