// Button Component
import { ButtonHTMLAttributes, ReactNode } from 'react';
import { clsx } from 'clsx';
import './Button.css';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
  size?: 'small' | 'medium' | 'large';
  loading?: boolean;
  icon?: ReactNode;
  iconPosition?: 'left' | 'right';
  fullWidth?: boolean;
  'aria-label'?: string;
}

export default function Button({
  variant = 'primary',
  size = 'medium',
  loading = false,
  icon,
  iconPosition = 'left',
  fullWidth = false,
  children,
  className,
  disabled,
  ...props
}: ButtonProps) {
  return (
    <button
      className={clsx(
        'btn',
        `btn--${variant}`,
        `btn--${size}`,
        {
          'btn--loading': loading,
          'btn--full-width': fullWidth,
        },
        className
      )}
      disabled={disabled || loading}
      aria-label={props['aria-label'] || (typeof children === 'string' ? children : undefined)}
      aria-busy={loading}
      aria-disabled={disabled || loading}
      {...props}
    >
      {loading ? (
        <>
          <span className="btn__spinner" />
          <span className="btn__text">{children}</span>
        </>
      ) : (
        <>
          {icon && iconPosition === 'left' && <span className="btn__icon">{icon}</span>}
          <span className="btn__text">{children}</span>
          {icon && iconPosition === 'right' && <span className="btn__icon">{icon}</span>}
        </>
      )}
    </button>
  );
}

