import React from 'react';
import type { BaseComponentProps, CallbackProps } from '../types';
import '../../styles/button.css';

/**
 * Props for Button component
 * FE-TYPE-013: Fully typed component props
 * Enhanced with Fusion Design System variants
 */
export interface ButtonProps
  extends BaseComponentProps,
    CallbackProps,
    Omit<
      React.ButtonHTMLAttributes<HTMLButtonElement>,
      keyof BaseComponentProps | 'onClick' | 'onSubmit'
    > {
  children: React.ReactNode;
  type?: 'button' | 'submit' | 'reset';
  disabled?: boolean;
  variant?:
    | 'primary'
    | 'secondary'
    | 'gaming'
    | 'terminal'
    | 'nature'
    | 'graffiti'
    | 'ghost'
    | 'outline'
    | 'destructive';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  icon?: boolean;
}

export const Button = ({
  children,
  onClick,
  type = 'button',
  disabled = false,
  variant = 'primary',
  size = 'md',
  icon = false,
  className = '',
  ...props
}: ButtonProps) => {
  const baseClass = 'btn-veza';
  const variantClass = `btn-veza--${variant}`;
  const sizeClass = `btn-veza--${size}`;
  const iconClass = icon ? 'btn-veza--icon' : '';

  const classes = [baseClass, variantClass, sizeClass, iconClass, className]
    .filter(Boolean)
    .join(' ');

  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={classes}
      {...props}
    >
      {children}
    </button>
  );
};
