import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import './dropdown-item.scss';

const Item = ({ className, variant, component: Component, closePanel, onClick, ...props }) => (
  <Component
    className={className}
    styleName={classNames('base', variant)}
    onClick={() => { if (closePanel) closePanel(); if (onClick) onClick(); }}
    {...props}
  />
);

Item.propTypes = {
  /** @ignore */
  className: PropTypes.string,
  /** @ignore */
  onClick: PropTypes.func,
  variant: PropTypes.oneOf(['simple', 'launcher']),
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ]),
  closePanel: PropTypes.func
};

Item.defaultProps = {
  className: undefined,
  variant: 'simple',
  component: 'a',
  closePanel: null,
  onClick: null
};

Item.componentName = 'Item';

export default Item;
