import { j as e } from "../../../../../_virtual/jsx-runtime.js";
import { usePreviewMode as o } from "../../../../../use-editor.js";
import { RxSection as n } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/rx/index.js";
import "react";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { ScrollablePanelTab as c } from "./ScrollablePanelTab.js";
import { useLocalStorage as m } from "../../../../../node_modules/.pnpm/usehooks-ts@3.1.1_react@18.3.0-canary-3d9b20132-20240124/node_modules/usehooks-ts/dist/index.js";
import { tx as x } from "../../../../style-system/dist/twind.js";
import { PanelBlockTitle as p } from "./PanelBlockTitle.js";
import f from "./SectionSettingsView.js";
import d from "./PageHierarchy.js";
import { Root as h } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/tabs.js";
import { Root as j, Text as u } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/callout.js";
function V({ section: s }) {
  o();
  const [i, r] = m("inspector_tabs_map", {}), t = i[s.id] ?? "settings";
  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-grow h-full", children: [
    /* @__PURE__ */ e.jsx(p, { children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center group", children: [
      /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
        /* @__PURE__ */ e.jsx(n, { className: "inline-block mr-2 w-5 h-5 text-upstart-600" }),
        "Section ",
        s.label ?? "unnamed"
      ] }),
      /* @__PURE__ */ e.jsx(
        "span",
        {
          className: x(
            "text-xs font-mono lowercase opacity-0 group-hover:opacity-70 transition-opacity delay-1000"
          ),
          onClick: () => {
            navigator.clipboard.writeText(s.id);
          },
          children: s.id
        }
      )
    ] }) }),
    /* @__PURE__ */ e.jsx(
      h,
      {
        value: t,
        onValueChange: (l) => {
          r((a) => ({ ...a, [s.id]: l }));
        },
        className: "flex-1 flex flex-col",
        children: /* @__PURE__ */ e.jsx(c, { tab: "settings", children: /* @__PURE__ */ e.jsx(b, { section: s }) })
      }
    )
  ] }, `section-inspector-${s.id}`);
}
function b({ section: s }) {
  const i = o();
  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col h-full", children: [
    i === "mobile" && /* @__PURE__ */ e.jsx(j, { size: "1", children: /* @__PURE__ */ e.jsxs(u, { size: "1", children: [
      /* @__PURE__ */ e.jsx("strong", { children: "Note" }),
      ": You are editing mobile-only styles. Any changes here will only affect how the brick appears on mobile devices."
    ] }) }),
    /* @__PURE__ */ e.jsx("div", { className: "basis-[50%] shrink-0 grow flex flex-col", children: /* @__PURE__ */ e.jsx(f, { section: s }) }),
    /* @__PURE__ */ e.jsx(d, { section: s, className: "h-[50cqh]" })
  ] });
}
export {
  V as default
};
//# sourceMappingURL=PanelSectionInspector.js.map
