import { BaseControl, Button } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { MOBILE_PADDING_PRESETS } from '../utils/field-defs';

export default function MobilePaddingPreset( { value, onChange } ) {
	const id = useInstanceId( MobilePaddingPreset, 'wuppi-mobile-padding-preset' );

	return (
		<BaseControl
			id={ id }
			label={ __( 'Mobile content padding', 'wuppi' ) }
			help={ __( 'Horizontal padding for text content on screens ≤ 781px.', 'wuppi' ) }
			__nextHasNoMarginBottom
		>
			<div className="wuppi-radius-preset-row">
				{ MOBILE_PADDING_PRESETS.map( ( preset ) => (
					<Button
						key={ preset.value }
						variant={ value === preset.value ? 'primary' : 'secondary' }
						onClick={ () => onChange( preset.value ) }
						className="wuppi-radius-preset-button"
					>
						{ preset.label }
					</Button>
				) ) }
			</div>
		</BaseControl>
	);
}
