import * as React from 'react';
import styles from './Button.module.scss';

type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'ghost' | 'danger';
type ButtonSize = 'md' | 'sm';

interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  fullWidth?: boolean;
}

const variantClass: Record<ButtonVariant, string> = {
  primary: styles.primary,
  accent: styles.accent,
  secondary: styles.secondary,
  ghost: styles.ghost,
  danger: styles.danger
};

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

  // type по умолчанию 'button', чтобы кнопки внутри формы не сабмитили её случайно.
  return (
    <button type={type} className={classes} {...rest}>
      {children}
    </button>
  );
};