import React, { useCallback } from 'react';
import { DropdownItem } from '@atlaskit/dropdown-menu';
import Lozenge from '@atlaskit/lozenge';
const LozengeActionItem = ({
  appearance,
  id,
  onClick,
  testId,
  text
}) => {
  const handleClick = useCallback(e => {
    // Prevent dropdown to close on select item.
    // We want to show loading screen.
    e.stopPropagation();
    if (onClick) {
      onClick(id, text, appearance);
    }
  }, [appearance, id, onClick, text]);
  const handleMouseEnter = useCallback(e => {
    var _e$currentTarget, _e$currentTarget$firs;
    (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : (_e$currentTarget$firs = _e$currentTarget.firstElementChild) === null || _e$currentTarget$firs === void 0 ? void 0 : _e$currentTarget$firs.focus();
  }, []);
  return (
    /*#__PURE__*/
    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
    React.createElement("span", {
      onMouseEnter: handleMouseEnter,
      role: "presentation"
    }, /*#__PURE__*/React.createElement(DropdownItem, {
      onClick: handleClick,
      testId: testId
    }, /*#__PURE__*/React.createElement(Lozenge, {
      appearance: appearance,
      isBold: true
    }, text)))
  );
};
export default LozengeActionItem;