import { jsx } from "react/jsx-runtime";
import { useState, useLayoutEffect } from "react";
import { cn } from "@netlify/ui";
import { isSupportedLanguage, highlight } from "./highlight.js";
const CodeBlock = ({
  content,
  highlighting = true,
  language = "text"
}) => {
  const [nodes, setNodes] = useState(null);
  if (!isSupportedLanguage(language)) {
    language = "text";
  }
  useLayoutEffect(() => {
    if (highlighting) {
      void (async () => {
        setNodes(
          await highlight(content, {
            components: {
              pre: ({ children, className, ...otherProps }) => /* @__PURE__ */ jsx("pre", { className: cn(className, "!tw-bg-black"), ...otherProps, children })
            },
            language,
            theme: "github-dark"
          })
        );
      })();
    }
  }, [highlighting]);
  return nodes ?? /* @__PURE__ */ jsx("pre", { className: "tw-bg-black", children: /* @__PURE__ */ jsx("code", { className: "tw-text-white", children: content }) });
};
export {
  CodeBlock
};
//# sourceMappingURL=CodeBlock.js.map
