import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@powerhousedao/design-system";
import { twMerge } from "tailwind-merge";
export function ConnectDropdownMenu(props) {
    const { children, items, open, onItemClick, onOpenChange, menuClassName } = props;
    return (_jsxs(DropdownMenu, { onOpenChange: onOpenChange, open: open, children: [_jsx(DropdownMenuTrigger, { asChild: true, className: "outline-none", children: children }), _jsx(DropdownMenuContent, { className: twMerge("modal-shadow cursor-pointer rounded-2xl bg-white text-sm font-medium text-slate-500", menuClassName), children: items.map(({ id, label, icon, className }) => (_jsxs(DropdownMenuItem, { className: twMerge("flex items-center px-5 py-2 outline-none first-of-type:rounded-t-2xl first-of-type:pt-3 last-of-type:rounded-b-2xl last-of-type:pb-3 hover:bg-slate-50", className), onClick: (e) => e.stopPropagation(), onSelect: () => onItemClick(id), children: [icon ? _jsx("span", { className: "mr-2 inline-block", children: icon }) : null, label] }, id))) })] }));
}
//# sourceMappingURL=dropdown-menu.js.map