import React from 'react';

type ButtonProps = {
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  disabled?: boolean;
  loading?: boolean;
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  className?: string;
  type?: 'button' | 'submit';
  fullWidth?: boolean;
};

const Button = ({
  children,
  onClick,
  disabled,
  loading,
  variant = 'primary',
  size = 'md',
  className = '',
  type = 'button',
  fullWidth,
}: ButtonProps) => {
  const variantClasses: Record<string, string> = {
    primary:
      'bg-[var(--tg-accent)] text-white hover:opacity-90 active:opacity-80',
    secondary:
      'bg-[var(--tg-bg-secondary)] text-[var(--tg-text-primary)] hover:bg-[var(--tg-divider)]',
    ghost:
      'bg-transparent text-[var(--tg-accent)] hover:bg-[var(--tg-accent-soft)]',
    danger: 'bg-[var(--tg-danger)] text-white hover:opacity-90 active:opacity-80',
  };

  const sizeClasses: Record<string, string> = {
    sm: 'h-8 px-3 text-sm rounded-lg',
    md: 'h-10 px-4 text-[15px] rounded-xl',
    lg: 'h-12 px-5 text-[15px] rounded-xl',
  };

  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled || loading}
      className={`
        inline-flex items-center justify-center gap-2 font-medium
        transition-all duration-150
        ${variantClasses[variant]}
        ${sizeClasses[size]}
        ${fullWidth ? 'w-full' : ''}
        ${disabled || loading ? 'opacity-50 pointer-events-none' : ''}
        ${className}
      `}
    >
      {loading ? (
        <span className="inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
      ) : (
        children
      )}
    </button>
  );
};

export default Button;
