import React from 'react';
import { cn } from '@/lib/utils';

export type ButtonVariant = 'primary' | 'outline' | 'error' | 'outline-light' | 'success';
export type ButtonSize = 'sm' | 'md' | 'lg';

export interface ButtonClassesProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  className?: string;
}

export function buttonClasses({ variant = 'primary', size = 'md', className }: ButtonClassesProps = {}) {
  const baseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors font-bold uppercase tracking-wider rounded-md';
  
  const variantClasses = {
    primary: 'bg-primary text-white hover:bg-primary/90 border-2 border-primary',
    outline: 'bg-transparent text-primary border-2 border-primary hover:bg-primary/5',
    'outline-light': 'bg-transparent text-white border-2 border-white hover:bg-white/10',
    error: 'bg-red-600 text-white hover:bg-red-700 border-2 border-red-600',
    success: 'bg-green-600 text-white hover:bg-green-700 border-2 border-green-600',
  };
  
  const sizeClasses = {
    sm: 'px-6 py-2.5 text-xs',
    md: 'px-8 py-3.5 text-sm',
    lg: 'px-10 py-5 text-base',
  };

  return cn(
    baseClasses,
    variantClasses[variant],
    sizeClasses[size],
    className
  );
}

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonClassesProps {
  children: React.ReactNode;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={buttonClasses({ variant, size, className })}
        {...props}
      >
        {children}
      </button>
    );
  }
);

Button.displayName = 'Button';