import { __ } from '@wordpress/i18n';
import { TextControl } from '@wordpress/components';
import { getResponsivePlaceholder } from '../../controls/responsiveValueUtils';
import UnitValueControl from '../../controls/UnitValueControl';

export default function Dimensions({
  activeDevice,
  width, height,
  minWidth, minHeight,
  maxWidth, maxHeight,
  aspectRatio,
  updateDeviceAttribute,
}) {
  return (
    <>
      <div className="two-columns-layout">
        <UnitValueControl
          label={__('Width', 'axcelersblocks')}
          value={width[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('width', value)}
          placeholder={getResponsivePlaceholder({ values: width, activeDevice, fallback: 'e.g., 100px, 50%, auto' })}
          preset="size"
          className="sizing-control__width"
        />
        <UnitValueControl
          label={__('Height', 'axcelersblocks')}
          value={height[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('height', value)}
          placeholder={getResponsivePlaceholder({ values: height, activeDevice, fallback: 'e.g., 100px, 50%, auto' })}
          preset="size"
          className="sizing-control__height"
        />
      </div>

      <div className="two-columns-layout">
        <UnitValueControl
          label={__('Min Width', 'axcelersblocks')}
          value={minWidth[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('minWidth', value)}
          placeholder={getResponsivePlaceholder({ values: minWidth, activeDevice, fallback: 'e.g., 200px, 20%' })}
          preset="minSize"
          className="sizing-control__min-width"
        />
        <UnitValueControl
          label={__('Min Height', 'axcelersblocks')}
          value={minHeight[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('minHeight', value)}
          placeholder={getResponsivePlaceholder({ values: minHeight, activeDevice, fallback: 'e.g., 200px, 20%' })}
          preset="minSize"
          className="sizing-control__min-height"
        />
      </div>

      <div className="two-columns-layout">
        <UnitValueControl
          label={__('Max Width', 'axcelersblocks')}
          value={maxWidth[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('maxWidth', value)}
          placeholder={getResponsivePlaceholder({ values: maxWidth, activeDevice, fallback: 'e.g., 500px, 100%' })}
          preset="maxSize"
          className="sizing-control__max-width"
        />
        <UnitValueControl
          label={__('Max Height', 'axcelersblocks')}
          value={maxHeight[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('maxHeight', value)}
          placeholder={getResponsivePlaceholder({ values: maxHeight, activeDevice, fallback: 'e.g., 500px, 100%' })}
          preset="maxSize"
          className="sizing-control__max-height"
        />
      </div>

      <TextControl
        label={__('Aspect Ratio', 'axcelersblocks')}
        value={aspectRatio[activeDevice] || ''}
        onChange={(value) => updateDeviceAttribute('aspectRatio', value)}
        placeholder={getResponsivePlaceholder({ values: aspectRatio, activeDevice, fallback: 'e.g., 16/9, 1/1' })}
        className="sizing-control__aspect-ratio"
      />
    </>
  );
}
