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

import styles from './HeroButton.styl';

export default function HeroButton({ children, icon, add, disabled, onClick }) {

  const classes = classNames({
    [styles.btn]: true,
    [styles.hasIcon]: icon
  });

  return (
    // eslint-disable-next-line react/button-has-type
    <button className={classes} disabled={disabled} onClick={onClick}>
      {
        icon ? <div className={styles.icon}><Icon name={icon} /></div> : null
      }
      {children}
      {
        add ? <div className={styles.mode}><Icon name="doka-icon-plus2" /></div> : null
      }
    </button>
  );
}

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

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