/* eslint-disable react/button-has-type */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from './Icon';

import styles from './LittleHeroButton.styl';

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

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

  return (
    <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>
  );
}

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

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

/*

<Button
  className={styles.boxbutton}
  icon="doka-icon-image"
  onClick={() => {}}
  primary
>
  {children}
  <div className={styles.mode} >
    <Icon highlight name="doka-icon-plus2" />
  </div>
</Button>
*/