import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from "../../../components/atoms/Button";
import { Icon } from "../../../components/atoms/Icon";
import { Text } from "../../../components/atoms/Text";
import { cn } from "../../../utils/cn";
/**
 * ButtonIcon Molecule Component
 * Button with icon and label text
 * Text color automatically adapts to background (dark bg = white text, light bg = dark text)
 */
export const ButtonIcon = ({ icon, label, variant = "primary", size = "md", className, onClick, href, iconFill = false, iconSize = "md", testId, }) => {
    // Determine text color based on variant and custom className
    // Dark backgrounds (primary, danger, custom dark bg) -> white text
    // Light backgrounds (ghost, outline, secondary) -> dark text
    const hasDarkBg = variant === "primary" ||
        variant === "danger" ||
        (className &&
            (className.includes("bg-primary") ||
                className.includes("bg-success") ||
                className.includes("bg-neutral-600") ||
                className.includes("bg-neutral-700") ||
                className.includes("bg-secondary") ||
                className.includes("bg-error") ||
                className.includes("bg-info")));
    const textColorClass = hasDarkBg
        ? "text-white"
        : variant === "ghost" || variant === "outline"
            ? "text-neutral-700 dark:text-neutral-300"
            : "text-neutral-900 dark:text-white";
    return (_jsxs(Button, { variant: variant, size: size, className: cn("inline-flex items-center gap-2", className), onClick: onClick, href: href, testId: testId, children: [_jsx(Icon, { name: icon, size: iconSize, fill: iconFill, testId: testId ? `${testId}.icon` : undefined }), _jsx(Text, { variant: "body", className: cn("font-medium", textColorClass), testId: testId ? `${testId}.label` : undefined, children: label })] }));
};
export default ButtonIcon;
