import cx from 'classnames';
import { any, bool, func, node, string } from 'prop-types';
import * as React from 'react';
import style from './MenuItem.module.scss';

const MenuItem = ({ children, className, noHover, ellipsis, disabled, onClick, as, ...rest }) => {
  const preferButton = !!onClick && !as;
  const Comp = as || (preferButton ? 'button' : 'div');
  return (
    <Comp
      type={preferButton ? 'button' : undefined}
      disabled={disabled}
      className={cx(
        style.item,
        disabled && style.disabled,
        noHover && style.noHover,
        ellipsis && style.ellipsis,
        className,
      )}
      onClick={onClick}
      {...rest}
    >
      {children}
    </Comp>
  );
};

MenuItem.propTypes = {
  as: any,
  children: node.isRequired,
  className: string,
  noHover: bool,
  ellipsis: bool,
  disabled: bool,
  onClick: func,
};

MenuItem.defaultProps = {
  as: undefined,
  className: '',
  noHover: false,
  ellipsis: false,
  disabled: false,
  onClick: undefined,
};

export default MenuItem;