import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
export const Button = ({ variant = "primary", size = "md", icon, iconPosition = "left", loading = false, children, className = "", disabled, onClick, ...props }) => {
    const buttonRef = React.useRef(null);
    const [ripples, setRipples] = React.useState([]);
    const baseClasses = `
    inline-flex items-center justify-center font-medium rounded-sm transition-colors 
    cursor-pointer relative overflow-hidden
    disabled:opacity-50 disabled:cursor-not-allowed
    font-[var(--font-default)]
  `;
    const variantClasses = {
        primary: `
      bg-[var(--color-primary)] text-[var(--color-primary-contrast)] 
      hover:bg-[var(--color-primary-dark)] focus:ring-[var(--color-primary)]
    `,
        outline: `
      border border-[var(--color-primary)] text-[var(--color-primary)] 
      hover:bg-[var(--color-bg-secondary)] focus:ring-[var(--color-primary)]
    `,
        ghost: `
      text-[var(--color-primary)] hover:bg-[var(--color-bg-secondary)] 
      focus:ring-[var(--color-primary)]
    `,
    };
    const sizeClasses = {
        sm: `${children ? "px-3 py-1.5" : "p-1.5"} text-sm`,
        md: `${children ? "px-4 py-2" : "p-2"} text-base`,
        lg: `${children ? "px-6 py-3" : "p-3"} text-lg`,
    };
    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
    const renderIcon = () => {
        if (!icon)
            return null;
        const iconClasses = size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6";
        return (_jsx("i", { className: `fa ${icon} ${iconClasses} ${children ? (iconPosition === "right" ? "ml-2" : "mr-2") : ""}` }));
    };
    const rippleColor = variant === "primary" ? "rgba(255, 255, 255, 0.45)" : "rgba(0, 0, 0, 0.15)";
    const handleClick = (event) => {
        if (!disabled && !loading && buttonRef.current) {
            const rect = buttonRef.current.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height) * 1.2;
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            const id = window.performance.now();
            const newRipple = { id, x, y, size };
            setRipples((prev) => [...prev, newRipple]);
            window.setTimeout(() => {
                setRipples((prev) => prev.filter((ripple) => ripple.id !== id));
            }, 600);
        }
        onClick?.(event);
    };
    return (_jsxs("button", { ref: buttonRef, className: classes, disabled: disabled || loading, onClick: handleClick, ...props, children: [_jsx("span", { className: "absolute inset-0 pointer-events-none", children: ripples.map((ripple) => (_jsx("span", { className: "absolute rounded-full opacity-40 flysoft-button-ripple", style: {
                        top: ripple.y,
                        left: ripple.x,
                        width: ripple.size,
                        height: ripple.size,
                        backgroundColor: rippleColor,
                    } }, ripple.id))) }), _jsxs("span", { className: "relative inline-flex items-center justify-center", children: [loading && _jsx("i", { className: "fa fa-spinner fa-spin mr-2" }), icon && iconPosition === "left" && !loading && renderIcon(), children, icon && iconPosition === "right" && !loading && renderIcon()] })] }));
};
