import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, Modal } from "@powerhousedao/design-system";
import { twMerge } from "tailwind-merge";
import { DBExplorer } from "../../db-explorer/index.js";
import { RemotesInspector, } from "../../remotes-inspector/index.js";
import { TabContent } from "../../tabs/tab-content.js";
import { Tabs } from "../../tabs/tabs.js";
export function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExplorerProps, remotesInspectorProps, defaultTab = "Database", }) {
    return (_jsx(Modal, { ...modalProps, contentProps: {
            className: "rounded-2xl",
        }, onOpenChange: onOpenChange, open: open, children: _jsxs("div", { ...containerProps, className: twMerge("flex h-[600px] w-[900px] flex-col rounded-2xl", containerProps?.className), children: [_jsx("div", { className: "flex items-center justify-end p-4 pb-0", children: _jsx("button", { className: "flex size-6 cursor-pointer items-center justify-center rounded-md text-gray-500 outline-none hover:text-gray-900", onClick: () => onOpenChange(false), type: "button", children: _jsx(Icon, { name: "XmarkLight", size: 24 }) }) }), _jsx("div", { className: "flex flex-1 flex-col overflow-hidden p-4 pt-2", children: _jsxs(Tabs, { defaultValue: defaultTab, children: [_jsx(TabContent, { description: "Database explorer", label: "Database", children: _jsx("div", { className: "h-[480px]", children: _jsx(DBExplorer, { ...dbExplorerProps }) }) }), _jsx(TabContent, { description: "Remotes inspector", label: "Remotes", children: _jsx("div", { className: "h-[480px]", children: _jsx(RemotesInspector, { ...remotesInspectorProps }) }) })] }) })] }) }));
}
//# sourceMappingURL=inspector-modal.js.map