import { __ } from '@wordpress/i18n';
import { mapOptions } from '@tailwind/helpers';

const actionValues = [
  { label: 'None', id: '' },
  { label: 'Hover', id: 'hover' },
  { label: 'Click', id: 'click' },
];

const interaction = {
  id: 'interaction',
  label: __('Interaction', 'blockbite'),
  helper: __('Action type', 'blockbite'),
  optionClass: 'grid',
  supports: { hover: false, children: false },
  modifiers: [
    {
      id: 'interactiontype',
      label: __('Action type', 'blockbite'),
      selector: false,
      options: [...mapOptions(actionValues)],
      className: 'icon',
    },
  ],
};

export const interactionPanel = {
  id: 'interaction',
  label: 'Interaction',
  controls: [interaction],
};

export default { interactionPanel };