import { __ } from '@wordpress/i18n';
import { BaseControl, NumberControl, SelectControl, __experimentalHStack as HStack } from '@wordpress/components';

/**
 * Control component with a number input and a select dropdown for units (px, rem, em, % etc.).
 */
export function NumberWithUnitControl() {
    // Example options for select control (CSS units)
    const unitOptions = [
        { label: __('px'), value: 'px' },
        { label: __('rem'), value: 'rem' },
        { label: __('em'), value: 'em' },
        { label: __('%'), value: '%' },
        { label: __('vh'), value: 'vh' },
        { label: __('vw'), value: 'vw' },
        { label: __('pt'), value: 'pt' },
        { label: __('cm'), value: 'cm' },
        { label: __('mm'), value: 'mm' },
    ];

    // State to manage the number and unit values
    const [value, setValue] = React.useState(10);
    const [unit, setUnit] = React.useState('px');

    return (
        <BaseControl label={__('Padding with Unit')}>
            <HStack>
                {/* Number input control */}
                <NumberControl
                    value={value}
                    onChange={(newValue) => setValue(newValue)}
                    min={0}
                    step={1}
                    label={__('Value')}
                />

                {/* Select dropdown control for units */}
                <SelectControl
                    value={unit}
                    options={unitOptions}
                    onChange={(newUnit) => setUnit(newUnit)}
                    label={__('Unit')}
                />
            </HStack>
        </BaseControl>
    );
}