import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../../components/ui/tooltip";
export function SimpleMenu({ items, activeItemKey, onItemClick, collapsed = false, }) {
    return (_jsx(TooltipProvider, { delayDuration: collapsed ? 100 : 1000, children: _jsx("div", { className: cn("bg-white flex h-full flex-col overflow-y-auto transition-[padding] duration-300", collapsed ? "p-2" : "p-4"), children: items.map((group, groupIndex) => (_jsxs("div", { className: cn("transition-[margin] duration-300 last:mb-0", collapsed ? "mb-0" : "mb-6", !collapsed &&
                    groupIndex > 0 &&
                    "border-border-default border-t pt-6"), children: [group.icon && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: cn("text-neutral-grey-50 flex items-center overflow-hidden text-sm font-semibold tracking-wide transition-all duration-300", collapsed ? "hidden h-0" : "mb-3 h-auto gap-2 px-2"), children: [_jsx("span", { className: cn("shrink-0 transition-all duration-300", collapsed
                                                ? "[&_svg]:h-4 [&_svg]:w-4"
                                                : "[&_svg]:h-4 [&_svg]:w-4"), children: group.icon }), _jsx("span", { className: cn("text-neutral-grey-50 truncate transition-all duration-300", collapsed ? "w-0 opacity-0" : "opacity-100"), children: group.label ?? group.id })] }) }), collapsed && (_jsx(TooltipContent, { side: "right", children: group.label ?? group.id }))] })), !group.icon && !collapsed && (_jsx("div", { className: "text-neutral-grey-50 mb-3 flex items-center gap-2 px-2 text-sm font-semibold tracking-wide", children: _jsx("span", { className: "truncate", children: group.label ?? group.id }) })), _jsx("div", { className: cn("flex flex-col transition-[gap] duration-300", collapsed ? "items-center gap-1" : "gap-1"), children: group.items?.map((subItem) => {
                            const isActive = activeItemKey === subItem.id;
                            const isDisabled = subItem.disabled === true;
                            const button = (_jsxs("button", { type: "button", disabled: isDisabled, "aria-current": isActive ? "page" : undefined, "aria-label": subItem.label ?? subItem.id, className: cn("group flex cursor-pointer items-center rounded-lg transition-all duration-300", collapsed
                                    ? "h-10 w-10 justify-center"
                                    : "w-full gap-3 py-2.5 pr-3 pl-5 text-left text-sm", "text-neutral-grey-100 hover:bg-neutral-grey-5 hover:text-neutral-grey-100", "focus-visible:ring-feedback-blue focus-visible:ring-2 focus-visible:outline-none", isActive && "bg-neutral-grey-5", isDisabled &&
                                    "cursor-not-allowed opacity-50 hover:bg-transparent", subItem.className), onClick: () => {
                                    if (isDisabled)
                                        return;
                                    onItemClick(subItem);
                                }, children: [subItem.icon ? (_jsx("span", { className: cn("shrink-0 transition-colors [&_svg]:h-5 [&_svg]:w-5", "group-hover:text-neutral-grey-50"), children: subItem.icon })) : (collapsed && (_jsx("span", { className: "text-xs font-medium", children: (subItem.label ?? subItem.id).charAt(0) }))), _jsx("span", { className: cn("min-w-0 flex-1 truncate font-normal transition-all duration-300", collapsed
                                            ? "hidden w-0 overflow-hidden"
                                            : "opacity-100"), children: subItem.label ?? subItem.id })] }));
                            // Wrap in tooltip when collapsed
                            if (collapsed) {
                                return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", children: subItem.label ?? subItem.id })] }, subItem.id));
                            }
                            return _jsx("div", { children: button }, subItem.id);
                        }) })] }, group.id))) }) }));
}
//# sourceMappingURL=SimpleMenu.js.map