import styles from './Button.module.scss';

export type ButtonVariant = 'primary' | 'secondary' | 'text' | 'warning' | 'danger';
export type ButtonSize = 'large' | 'regular' | 'small';

export interface ButtonProps {
  /** Button content */
  children: React.ReactNode;
  /** Button visual style */
  variant?: ButtonVariant;
  /** Button size */
  size?: ButtonSize;
  /** Optional icon to display before text */
  leadingIcon?: React.ReactNode;
  /** Optional icon to display after text */
  trailingIcon?: React.ReactNode;
  /** Click handler */
  onClick?: () => void;
  /** Disabled state */
  disabled?: boolean;
  /** Button type attribute */
  type?: 'button' | 'submit' | 'reset';
  /** Additional CSS classes */
  className?: string;
  /** Accessible label */
  'aria-label'?: string;
}

export const Button = ({
  children,
  variant = 'primary',
  size = 'regular',
  leadingIcon,
  trailingIcon,
  onClick,
  disabled = false,
  type = 'button',
  className = '',
  'aria-label': ariaLabel,
}: ButtonProps) => {
  const buttonClassName = [
    styles.button,
    styles[variant],
    styles[size],
    disabled ? styles.disabled : '',
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <button className={buttonClassName} onClick={onClick} disabled={disabled} type={type} aria-label={ariaLabel}>
      {leadingIcon && <span className={styles.icon}>{leadingIcon}</span>}
      <span className={styles.buttonText}>{children}</span>
      {trailingIcon && <span className={styles.icon}>{trailingIcon}</span>}
    </button>
  );
};