import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, Modal } from "@powerhousedao/design-system";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
export function SettingsModal(props) {
    const { title, overlayProps, contentProps, onOpenChange, tabs, defaultTab, ...restProps } = props;
    const [selectedTab, setSelectedTab] = useState(defaultTab ?? tabs.at(0)?.id);
    const tabsContent = tabs.map((tab) => (_jsx("button", { type: "button", onClick: () => setSelectedTab(tab.id), children: _jsxs("div", { className: twMerge("flex h-9 w-48 cursor-pointer items-center gap-x-2 rounded-md pl-3 hover:bg-slate-50", selectedTab === tab.id ? "bg-slate-50" : "bg-transparent"), children: [tab.icon, _jsx("span", { children: tab.label })] }) }, tab.id)));
    const selectedTabContent = tabs.find((tab) => tab.id === selectedTab)?.content;
    const SelectedTabComponent = selectedTabContent;
    return (_jsxs(Modal, { contentProps: {
            ...contentProps,
            className: twMerge("min-h-full w-full max-w-4xl rounded-xl", contentProps?.className),
            style: {
                ...contentProps?.style,
                boxShadow: "0px 0px 16px 4px rgba(0, 0, 0, 0.04), 0px 33px 32px -16px rgba(0, 0, 0, 0.10)",
            },
        }, onOpenChange: onOpenChange, overlayProps: {
            ...overlayProps,
            className: twMerge("py-28", overlayProps?.className),
        }, ...restProps, children: [_jsxs("div", { className: "flex justify-between border-b border-slate-50 p-4", children: [_jsx("h1", { className: "text-center text-xl font-semibold", children: title }), _jsx("button", { type: "button", className: "flex size-6 items-center justify-center rounded-md outline-none", onClick: () => onOpenChange?.(false), children: _jsx(Icon, { name: "XmarkLight", size: 24 }) })] }), _jsxs("div", { className: "flex flex-1", children: [_jsx("div", { className: "flex flex-col gap-y-1 p-3 pt-6", children: tabsContent }), _jsx("div", { className: "m-6 flex h-full flex-1 flex-col overflow-hidden rounded-lg border border-slate-50", children: typeof SelectedTabComponent === "function" ? (_jsx(SelectedTabComponent, {})) : (SelectedTabComponent) })] })] }));
}
//# sourceMappingURL=settings-modal.js.map