import PropTypes from 'prop-types';
import styles from './styles.module.css';

const Button = ({ loading, size, disabled, children, variant, ...props }) => {
  return (
    <button
      className={`${styles.button} ${styles[variant]}  ${styles[size]} ${
        disabled ? styles['disabled'] : ''
      }`}
      {...props}>
      {loading && (
        <div className={`${styles.loader} ${styles[`loader-${size}`]}`}></div>
      )}
      {children}
    </button>
  );
};

export default Button;

Button.propTypes = {
  children: PropTypes.node.isRequired,
  disabled: PropTypes.bool,
  size: PropTypes.string,
  loading: PropTypes.bool
};
