import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
const meta = {
    title: "Powerhouse/Components/DropdownMenu",
    component: DropdownMenu,
};
export default meta;
const items = [
    {
        id: "item-1",
        content: "Item 1",
    },
    {
        id: "item-2",
        content: "Item 2",
    },
    {
        id: "item-3",
        content: "Item 3",
    },
];
const content = (_jsx(DropdownMenuContent, { className: "w-64 cursor-pointer rounded border-2 border-blue-600 bg-white", children: items.map((item) => (_jsx(DropdownMenuItem, { className: "px-2 hover:bg-gray-200", id: item.id, children: item.content }, item.id))) }));
export const Uncontrolled = {
    render: function Wrapper(args) {
        return (_jsxs(DropdownMenu, { ...args, children: [_jsx(DropdownMenuTrigger, { children: "\u2630" }), content] }));
    },
};
export const Controlled = {
    render: function Wrapper(args) {
        const [open, setOpen] = useState(true);
        function toggleDropdown() {
            setOpen(!open);
        }
        return (_jsxs(DropdownMenu, { ...args, onOpenChange: setOpen, open: open, children: [_jsx(DropdownMenuTrigger, { onClick: toggleDropdown, children: "Toggle" }), content] }));
    },
};
//# sourceMappingURL=dropdown-menu.stories.js.map