import { jsx } from "react/jsx-runtime";
import { observer, use$ as useSelector } from "../../../../_vendor/@legendapp/state/react.js";
import { useState, useEffect } from "react";
import { tcv } from "@choiceform/design-system";
import { codeToHtml } from "../../../../_vendor/shiki/dist-bundle-full.js";
import { coreStore$ } from "../../../../stores/core-store.js";
const codeBlockCodeTv = 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 = observer(function CodeBlockCode2(props) {
  const { code, language = "tsx", className, ...rest } = props;
  const globalTheme = useSelector(coreStore$.ui.theme);
  const effectiveTheme = globalTheme;
  const [highlightedHtml, setHighlightedHtml] = useState(null);
  useEffect(() => {
    async function highlight() {
      if (!code) {
        setHighlightedHtml("<pre><code></code></pre>");
        return;
      }
      const html = await codeToHtml(code, {
        lang: language,
        theme: effectiveTheme === "light" ? "github-light" : "github-dark"
      });
      setHighlightedHtml(html);
    }
    highlight();
  }, [code, language, effectiveTheme]);
  const classNames = codeBlockCodeTv({ className });
  return highlightedHtml ? /* @__PURE__ */ jsx(
    "div",
    {
      className: classNames,
      dangerouslySetInnerHTML: { __html: highlightedHtml },
      ...rest
    }
  ) : /* @__PURE__ */ jsx(
    "div",
    {
      className: classNames,
      ...rest,
      children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) })
    }
  );
});
export {
  CodeBlockCode
};
//# sourceMappingURL=code-block-code.js.map
