"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const react = require("../../../../_vendor/@legendapp/state/react.cjs");
const React = require("react");
const designSystem = require("@choiceform/design-system");
const bundleFull = require("../../../../_vendor/shiki/dist-bundle-full.cjs");
const coreStore = require("../../../../stores/core-store.cjs");
const codeBlockCodeTv = designSystem.tcv({
  base: "text-message-code w-fit min-w-full bg-transparent font-mono [&>pre]:!bg-transparent [&>pre]:px-4 [&>pre]:py-4"
});
const CodeBlockCode = react.observer(function CodeBlockCode2(props) {
  const { code, language = "tsx", className, ...rest } = props;
  const globalTheme = react.use$(coreStore.coreStore$.ui.theme);
  const effectiveTheme = globalTheme;
  const [highlightedHtml, setHighlightedHtml] = React.useState(null);
  React.useEffect(() => {
    async function highlight() {
      if (!code) {
        setHighlightedHtml("<pre><code></code></pre>");
        return;
      }
      const html = await bundleFull.codeToHtml(code, {
        lang: language,
        theme: effectiveTheme === "light" ? "github-light" : "github-dark"
      });
      setHighlightedHtml(html);
    }
    highlight();
  }, [code, language, effectiveTheme]);
  const classNames = codeBlockCodeTv({ className });
  return highlightedHtml ? /* @__PURE__ */ require$$0.jsx(
    "div",
    {
      className: classNames,
      dangerouslySetInnerHTML: { __html: highlightedHtml },
      ...rest
    }
  ) : /* @__PURE__ */ require$$0.jsx(
    "div",
    {
      className: classNames,
      ...rest,
      children: /* @__PURE__ */ require$$0.jsx("pre", { children: /* @__PURE__ */ require$$0.jsx("code", { children: code }) })
    }
  );
});
exports.CodeBlockCode = CodeBlockCode;
//# sourceMappingURL=code-block-code.cjs.map
