import { forwardRef, type ButtonHTMLAttributes } from 'react';
import { Loader2 } from 'lucide-react';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
  isLoading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className = '', variant = 'primary', isLoading, children, disabled, ...props }, ref) => {
    const baseStyles = 'inline-flex items-center justify-center px-6 py-4 text-sm font-bold tracking-[0.15em] uppercase rounded-2xl transition-all duration-200 focus:outline-none focus:ring-4 disabled:opacity-50 disabled:cursor-not-allowed transform active:scale-[0.98]';
    
    const variants = {
      primary: 'bg-zinc-900 text-white hover:bg-zinc-800 shadow-md hover:shadow-lg focus:ring-zinc-200',
      secondary: 'bg-zinc-100 text-zinc-800 hover:bg-zinc-200 focus:ring-zinc-100',
      danger: 'bg-red-500 text-white hover:bg-red-600 shadow-md focus:ring-red-100',
      ghost: 'bg-transparent text-zinc-600 hover:bg-zinc-100 focus:ring-zinc-100'
    };

    return (
      <button
        ref={ref}
        className={`${baseStyles} ${variants[variant]} ${className}`}
        disabled={disabled || isLoading}
        {...props}
      >
        {isLoading && <Loader2 className="w-5 h-5 mr-3 animate-spin" />}
        {children}
      </button>
    );
  }
);
Button.displayName = 'Button';
