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

import styles from './HeroButton.styl';
import Icon from './Icon';

export default function HeroButtonListItem({ icon, add, disabled, onClick, children }) {
  return (
    <li className={styles.listItem} onClick={onClick}>
      {!!icon && <Icon name={icon} />}
      <span className={styles.label}>{children}</span>
      {!!add && <Icon small name="doka-icon-plus2" />}
    </li>
  );
}

HeroButtonListItem.propTypes = {
  children: PropTypes.node,
  icon: PropTypes.string,
  add: PropTypes.bool,
  disabled: PropTypes.bool,
  onClick: PropTypes.func
};

HeroButtonListItem.defaultProps = {
  children: undefined,
  icon: undefined,
  add: undefined,
  disabled: undefined,
  onClick: undefined
};