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

import './item.scss';

const Item = ({
  className, component: Component, innerComponent: InnerComponent,
  children, bold, to, href, target, alignRight, ...props
}) => (
  <Component className={className} styleName={classNames('container', { 'align-right': alignRight })} {...props}>
    <InnerComponent
      styleName={classNames('inner-component', { bold })}
      to={to}
      href={href}
      target={target}
    >
      {children}
    </InnerComponent>
  </Component>
);

Item.propTypes = {
  /** @ignore */
  className: PropTypes.string,
  children: PropTypes.node,
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.element
  ]),
  innerComponent: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.element
  ]),
  bold: PropTypes.bool,
  alignRight: PropTypes.bool,
  to: PropTypes.string,
  target: PropTypes.string,
  href: PropTypes.string
};

Item.defaultProps = {
  className: undefined,
  children: undefined,
  component: 'li',
  innerComponent: 'a',
  bold: false,
  alignRight: false,
  to: undefined,
  target: undefined,
  href: undefined
};

export default Item;
