import { __ } from '@wordpress/i18n';
import { PanelBody, SelectControl } from '@wordpress/components';
import { getResponsiveSelectOptions } from '../../controls/responsiveValueUtils';

export default function FloatsHover({ activeDevice, float__hover, clear__hover, updateDeviceAttribute }) {
  // Float options
  const floatOptions = [
    { value: '', label: __('Default', 'axcelersblocks') },
    { value: 'none', label: __('None', 'axcelersblocks') },
    { value: 'left', label: __('Left', 'axcelersblocks') },
    { value: 'right', label: __('Right', 'axcelersblocks') },
    { value: 'inline-start', label: __('Inline Start', 'axcelersblocks') },
    { value: 'inline-end', label: __('Inline End', 'axcelersblocks') },
  ];

  // Clear options
  const clearOptions = [
    { value: '', label: __('Default', 'axcelersblocks') },
    { value: 'none', label: __('None', 'axcelersblocks') },
    { value: 'left', label: __('Left', 'axcelersblocks') },
    { value: 'right', label: __('Right', 'axcelersblocks') },
    { value: 'both', label: __('Both', 'axcelersblocks') },
  ];
  const floatSelectOptions = getResponsiveSelectOptions({
    values: float__hover,
    activeDevice,
    options: floatOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });
  const clearSelectOptions = getResponsiveSelectOptions({
    values: clear__hover,
    activeDevice,
    options: clearOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });

  return (
		<PanelBody
			className="floats-controls"
			title={__('Floats (Hover)', 'axcelersblocks')}
			initialOpen={false}
		>
      {/* Float Selection */}
      <SelectControl
        label={__('Float', 'axcelersblocks')}
        value={float__hover[activeDevice] || ''}
        options={floatSelectOptions}
        onChange={(value) => updateDeviceAttribute('float__hover', value)}
        className="float-control"
      />

      {/* Clear Selection */}
      <SelectControl
        label={__('Clear', 'axcelersblocks')}
        value={clear__hover[activeDevice] || ''}
        options={clearSelectOptions}
        onChange={(value) => updateDeviceAttribute('clear__hover', value)}
        className="clear-control"
      />
		</PanelBody>
  );
}
