"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibleButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const AccessibleButton = ({ variant = 'primary', size = 'md', isLoading = false, leftIcon, rightIcon, fullWidth = false, className = '', children, disabled, label, icon, iconPosition, isDisabled, startIcon, endIcon, ...props }) => {
    // Handle backwards compatibility with different prop naming
    const isButtonDisabled = disabled || isDisabled || false;
    // Simple class mapping based on props
    const variantClasses = {
        primary: 'bg-blue-600 text-white hover:bg-blue-700',
        secondary: 'bg-gray-600 text-white hover:bg-gray-700',
        tertiary: 'bg-transparent text-blue-600 hover:bg-blue-50',
        danger: 'bg-red-600 text-white hover:bg-red-700',
        success: 'bg-green-600 text-white hover:bg-green-700',
    };
    const sizeClasses = {
        sm: 'px-3 py-1 text-sm',
        md: 'px-4 py-2 text-base',
        lg: 'px-6 py-3 text-lg',
    };
    // Build the button classes
    const buttonClasses = [
        'rounded font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed',
        variantClasses[variant] || variantClasses.primary,
        sizeClasses[size] || sizeClasses.md,
        fullWidth ? 'w-full' : '',
        className,
    ].filter(Boolean).join(' ');
    // If icon is specified with iconPosition, create the icon element
    let iconElement = null;
    if (icon) {
        // This is a simplified icon handling - in a real component you'd map icon names to components
        iconElement = (0, jsx_runtime_1.jsx)("span", { className: "inline-block w-5 h-5", children: icon });
    }
    // Use leftIcon/rightIcon props if provided, otherwise use icon + iconPosition
    // Also handle startIcon/endIcon aliases
    const finalLeftIcon = leftIcon || startIcon || (iconPosition === 'start' ? iconElement : null);
    const finalRightIcon = rightIcon || endIcon || (iconPosition === 'end' ? iconElement : null);
    // Use label if provided, otherwise use children
    const buttonContent = label || children;
    return ((0, jsx_runtime_1.jsxs)("button", { className: buttonClasses, disabled: isButtonDisabled || isLoading, "aria-busy": isLoading ? "true" : undefined, "aria-disabled": isButtonDisabled ? "true" : undefined, ...props, children: [isLoading && ((0, jsx_runtime_1.jsx)("span", { className: "mr-2 inline-block animate-spin", children: "\u27F3" })), finalLeftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "mr-2 inline-flex items-center", "aria-hidden": "true", children: finalLeftIcon })), (0, jsx_runtime_1.jsx)("span", { children: buttonContent }), finalRightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "ml-2 inline-flex items-center", "aria-hidden": "true", children: finalRightIcon }))] }));
};
exports.AccessibleButton = AccessibleButton;
exports.default = exports.AccessibleButton;
//# sourceMappingURL=AccessibleButton.js.map