"use client";
import { jsx } from "react/jsx-runtime";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { useEffect, useState, memo } from "react";
import { codeToHtml } from "shiki";
import { cn } from "../../lib/utils/index.js";
const ShikiCodeBlock = memo(function ShikiCodeBlock2({
  code,
  language
}) {
  const [html, setHtml] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    let mounted = true;
    codeToHtml(code, {
      lang: language || "text",
      theme: "github-dark"
    }).then((result) => {
      if (mounted) {
        setHtml(result);
        setIsLoading(false);
      }
    }).catch(() => {
      if (mounted) {
        setHtml("");
        setIsLoading(false);
      }
    });
    return () => {
      mounted = false;
    };
  }, [code, language]);
  if (isLoading) {
    return /* @__PURE__ */ jsx("pre", { className: "bg-slate-900 text-slate-100 p-4 rounded-md overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: code }) });
  }
  if (!html) {
    return /* @__PURE__ */ jsx("pre", { className: "bg-slate-900 text-slate-100 p-4 rounded-md overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: code }) });
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: "[&_pre]:!m-0 [&_pre]:!rounded-md [&_pre]:!p-4 overflow-x-auto",
      dangerouslySetInnerHTML: { __html: html }
    }
  );
});
function MarkdownViewer({ content, className }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn(
        "prose prose-sm dark:prose-invert max-w-none",
        "prose-headings:text-violet-600 dark:prose-headings:text-violet-400",
        "prose-a:text-violet-600 dark:prose-a:text-violet-400",
        "prose-code:text-pink-600 dark:prose-code:text-pink-400",
        "prose-pre:bg-slate-900 prose-pre:text-slate-100",
        // Table styles
        "prose-table:border-collapse prose-table:w-full",
        "prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left",
        "prose-td:border prose-td:border-border prose-td:p-2 prose-td:align-top",
        className
      ),
      "data-cy": "devtools-tests-markdown-content",
      children: /* @__PURE__ */ jsx(
        ReactMarkdown,
        {
          remarkPlugins: [remarkGfm],
          components: {
            code(props) {
              const { className: className2, children, ...rest } = props;
              const match = /language-(\w+)/.exec(className2 || "");
              const language = match ? match[1] : "";
              const isInline = !match;
              if (!isInline && language) {
                const code = String(children).replace(/\n$/, "");
                return /* @__PURE__ */ jsx(ShikiCodeBlock, { code, language });
              }
              return /* @__PURE__ */ jsx("code", { className: className2, ...rest, children });
            }
          },
          children: content
        }
      )
    }
  );
}
export {
  MarkdownViewer
};
