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

export const Button = ({ variant, size, label, loading, ...props }) => {
  return (
    <button
      className={clsx(
        styles.button,
        styles[variant],
        styles[size],
        loading && styles.loading
      )}
      disabled={loading || props.disabled}
      {...props}
    >
      {loading ? 'Loading...' : label}
    </button>
  );
};

Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'secondary']).isRequired,
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  label: PropTypes.string.isRequired,
  loading: PropTypes.bool,
};

Button.defaultProps = {
  size: 'md',
  loading: false,
};
