import { __ } from '@wordpress/i18n';
import { BaseControl,  __experimentalNumberControl as 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 DimensionValueControl() {
    // Example options for select control (CSS units)
    const unitOptions = [
        { label: __('px'), value: 'px' },
        { label: __('%'), value: '%' },
        { label: __('em'), value: 'em' },
        { label: __('rem'), value: 'rem' },
        { label: __('vw'), value: 'vw' },
        { label: __('vh'), value: 'vh' }
    ];

    return (
        <BaseControl                    className="lcp-dimension-value-control" // Custom class for styling parent
>
            <div style={{ position: 'relative', padding: '5px', border:'1px solid red'}}>
            <HStack>
                {/* Number input control */}
                <NumberControl
                    className="lcp-number-control" // Custom class for styling parent

                    value={10} // Placeholder value
                    onChange={() => {}} // No-op for onChange
                    min={0}
                    step={1}
                    />

                {/* Select dropdown control for units */}
                <SelectControl
                    className="lcp-select-control" // Custom class for styling parent
                    style={{ marginBottom: '0' }} // Applying in-line style for margin                    value={'px'} // Placeholder value
                    options={unitOptions}
                    onChange={() => {}} // No-op for onChange
                />
            </HStack>
            </div>
        </BaseControl>
    );
}