import {Input} from '@headlessui/react';

const SpacingField = ( {field, value, onChange, isReadonly} ) => {
	const spacingValue = value || {};

	return (
		<div className="adpresso-ad-positioning-spacing-wrapper">
			{Object.entries( field.options || {} ).map( ( [direction, option] ) => {
				const inputId = `adpresso-ad-positioning-spacing-${direction}`;
				const isFieldReadonly = isReadonly && (direction === 'left' || direction === 'right');

				return (
					<label key={direction} htmlFor={inputId} className={`adpresso-spacing-control-${direction}`}>
						<span className="screen-reader-text adpresso-spacing-label">{option.label}</span>
						<Input
							type="number"
							name={field.id}
							id={inputId}
							className="adpresso-input adpresso-spacing-input"
							value={spacingValue[direction] || ''}
							onChange={( e ) => {
								const raw = e.target.value;
								const next = raw === '' ? '' : Number( raw );
								onChange( direction, next );
							}}
							readOnly={isFieldReadonly}
						/>
					</label>
				);
			} )}
			<div className="adpresso-ad-positioning-spacing-adcenter" aria-hidden="true">Ad</div>
		</div>
	);
};

export default SpacingField;