import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils";
export function MultiSwitchButton({ value, options, onValueChange, className, optionClassName, testId, "aria-label": ariaLabel, }) {
    return (_jsx("div", { className: cn("bg-neutral-grey-5 grid gap-1 rounded-[6px] p-1", className), style: {
            gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`,
        }, role: "group", "aria-label": ariaLabel, "data-testid": testId, children: options.map((option) => {
            const Icon = option.icon;
            const active = value === option.value;
            return (_jsxs("button", { type: "button", className: cn("text-neutral-grey-100 flex h-9 min-w-0 items-center justify-center gap-2 rounded-[5px] px-2 text-xs font-medium transition-colors hover:bg-white/70", active && "bg-white", optionClassName), "aria-pressed": active, onClick: () => onValueChange(option.value), "data-testid": option.testId, children: [Icon && _jsx(Icon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { className: "truncate", children: option.label })] }, option.value));
        }) }));
}
//# sourceMappingURL=multi-switch-button.js.map