import React from 'react';
import { cn } from '../../utils/cn';

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: 'primary' | 'secondary' | 'ghost' | 'gaming' | 'terminal' | 'nature' | 'icon';
    size?: 'sm' | 'md' | 'lg' | 'icon';
    icon?: React.ReactNode;
    children?: React.ReactNode;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ variant = 'primary', size = 'md', icon, children, className, ...props }, ref) => {
        // Base styles
        const baseStyles =
            'relative inline-flex items-center justify-center font-body font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-kodo-void rounded-lg';

        // Size styles
        const sizeStyles = {
            sm: 'text-xs px-3 py-1.5 gap-2',
            md: 'text-sm px-5 py-2.5 gap-2',
            lg: 'text-base px-8 py-3.5 gap-3',
            icon: 'p-2.5',
        };

        // Variant styles
        const variantStyles = {
            primary:
                'bg-gradient-to-r from-kodo-cyan-dim to-kodo-cyan text-kodo-void hover:shadow-lg hover:shadow-kodo-cyan/20 border border-transparent font-bold tracking-wide',
            secondary:
                'bg-transparent border border-kodo-magenta/50 text-kodo-magenta hover:bg-kodo-magenta/5 hover:border-kodo-magenta hover:text-white',
            ghost: 'bg-transparent text-gray-400 hover:text-white hover:bg-white/5',
            gaming:
                'bg-kodo-slate border border-kodo-gold/40 text-kodo-gold hover:bg-kodo-gold/10 hover:border-kodo-gold font-bold tracking-wider uppercase',
            terminal:
                'bg-kodo-ink border border-kodo-steel text-gray-300 font-mono text-xs hover:border-kodo-cyan hover:text-kodo-cyan',
            nature: 'bg-kodo-slate border border-kodo-lime/30 text-kodo-lime hover:bg-kodo-lime/10',
            icon: 'bg-transparent hover:bg-white/10 text-gray-400 hover:text-white rounded-full p-2',
        };

        // Combine classes
        const finalClass =
            variant === 'icon'
                ? cn(baseStyles, variantStyles.icon, className)
                : cn(baseStyles, sizeStyles[size], variantStyles[variant], className);

        return (
            <button ref={ref} className={finalClass} {...props}>
                {icon && <span className={children ? '' : 'flex items-center justify-center'}>{icon}</span>}
                {children && <span>{children}</span>}
            </button>
        );
    }
);

Button.displayName = 'Button';
