import React from 'react';

import { css } from '@leafygreen-ui/emotion';
// @ts-expect-error
import OpenNewTabIcon from '@leafygreen-ui/icon/dist/OpenNewTab';
import { MenuItem } from '@leafygreen-ui/menu';
import { palette } from '@leafygreen-ui/palette';

import { OnElementClickType } from '../../on-element-click-provider/OnElementClickProvider';

interface GetHelpMenuItemProps {
  newTab: boolean;
  testId: string;
  href?: string;
  onClick: ReturnType<OnElementClickType>;
  children: string;
}

const menuItemContentStyle = css`
  display: flex;
  align-items: flex-start;
  gap: 2px;
`;

const tabIconStyle = css`
  height: 14px;
  width: 14px;
  color: ${palette.blue.light1};
`;

export const GetHelpMenuItem = ({
  newTab,
  children,
  testId,
  ...rest
}: GetHelpMenuItemProps) => {
  return (
    <MenuItem
      {...rest}
      data-testid={testId}
      // TODO: Restore tablet-specific styles
      // size={isTablet ? 'large' : 'default'}
      target={newTab ? '_blank' : ''}
      rel={newTab ? 'noopener noreferrer' : ''}
    >
      <div className={menuItemContentStyle}>
        {children}
        {newTab && (
          <OpenNewTabIcon role="presentation" className={tabIconStyle} />
        )}
      </div>
    </MenuItem>
  );
};