import React from 'react';
import { Loader2 } from 'lucide-react';
import { Ripple } from './Ripple';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
    size?: 'sm' | 'md' | 'lg' | 'icon';
    fullWidth?: boolean;
    loading?: boolean;
    children: React.ReactNode;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className = '', variant = 'primary', size = 'md', fullWidth = false, loading = false, children, disabled, ...props }, ref) => {

        const baseStyles = "inline-flex items-center justify-center rounded-full font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";

        const variants = {
            primary: "bg-primary text-on-primary hover:bg-primary/90",
            secondary: "bg-secondary-container text-on-secondary-container hover:bg-secondary-container/80",
            outline: "border border-outline text-primary hover:bg-primary-container/10",
            ghost: "text-on-surface hover:bg-surface-container-high",
            destructive: "bg-error text-on-error hover:bg-error/90",
        };

        const sizes = {
            sm: "h-8 px-3 text-xs",
            md: "h-10 px-4 text-sm",
            lg: "h-12 px-8 text-base",
            icon: "h-10 w-10",
        };

        const width = fullWidth ? "w-full" : "";

        return (
            <button
                ref={ref}
                className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${width} ${className} relative overflow-hidden`}
                disabled={disabled || loading}
                {...props}
            >
                <Ripple color={variant === 'primary' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)'} />
                {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                {children}
            </button>
        );
    }
);

Button.displayName = "Button";