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

export default function DimensionsHover({
  activeDevice,
  width__hover, height__hover,
  minWidth__hover, minHeight__hover,
  maxWidth__hover, maxHeight__hover,
  aspectRatio__hover,
  updateDeviceAttribute,
}) {
  return (
    <>
      <div className="two-columns-layout">
        <UnitValueControl
          label={__('Width', 'axcelersblocks')}
          value={width__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('width__hover', value)}
          placeholder={getResponsivePlaceholder({ values: width__hover, activeDevice, fallback: 'e.g., 100px, 50%, auto' })}
          preset="size"
          className="sizing-control__width"
        />
        <UnitValueControl
          label={__('Height', 'axcelersblocks')}
          value={height__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('height__hover', value)}
          placeholder={getResponsivePlaceholder({ values: height__hover, 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__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('minWidth__hover', value)}
          placeholder={getResponsivePlaceholder({ values: minWidth__hover, activeDevice, fallback: 'e.g., 200px, 20%' })}
          preset="minSize"
          className="sizing-control__min-width"
        />
        <UnitValueControl
          label={__('Min Height', 'axcelersblocks')}
          value={minHeight__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('minHeight__hover', value)}
          placeholder={getResponsivePlaceholder({ values: minHeight__hover, 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__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('maxWidth__hover', value)}
          placeholder={getResponsivePlaceholder({ values: maxWidth__hover, activeDevice, fallback: 'e.g., 500px, 100%' })}
          preset="maxSize"
          className="sizing-control__max-width"
        />
        <UnitValueControl
          label={__('Max Height', 'axcelersblocks')}
          value={maxHeight__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('maxHeight__hover', value)}
          placeholder={getResponsivePlaceholder({ values: maxHeight__hover, activeDevice, fallback: 'e.g., 500px, 100%' })}
          preset="maxSize"
          className="sizing-control__max-height"
        />
      </div>

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