import * as React from 'react';
import styles from './Button.module.scss';
import { Icon, IconName } from './Icon';

export type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'ghost' | 'danger';

export interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: 'md' | 'sm';
  icon?: IconName;
}

export const Button: React.FC<IButtonProps> = ({
  variant = 'secondary',
  size = 'md',
  icon,
  className,
  children,
  ...rest
}) => {
  const classes = [styles.btn, styles[variant], size === 'sm' ? styles.sm : '', className]
    .filter(Boolean)
    .join(' ');

  return (
    <button type="button" className={classes} {...rest}>
      {icon && <Icon name={icon} size="sm" />}
      {children}
    </button>
  );
};