import { mermaid_default } from "../../node_modules/mermaid/dist/mermaid.core.js";
import { c } from "react/compiler-runtime";
import React, { useEffect, useRef } from "react";
import { jsx } from "react/jsx-runtime";
mermaid_default.initialize({
	startOnLoad: !1,
	theme: "default",
	securityLevel: "loose",
	flowchart: {
		useMaxWidth: !0,
		htmlLabels: !0
	}
});
var MermaidDiagram_default = (i) => {
	let o = c(5), { chart: s, className: l } = i, u = useRef(null), d, f;
	o[0] === s ? (d = o[1], f = o[2]) : (d = () => {
		(async () => {
			let r = u.current;
			if (r) try {
				let i = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
				r.innerHTML = "";
				let { svg: a } = await mermaid_default.render(i, s);
				u.current && (u.current.innerHTML = a);
			} catch (e) {
				let r = e;
				console.error("Mermaid rendering error:", r), u.current && (u.current.innerHTML = `
            <div class="bg-red-50 border border-red-200 rounded-md p-4 text-red-700">
              <strong>Mermaid Diagram Error:</strong> Failed to render diagram
              <pre class="mt-2 text-xs bg-red-100 p-2 rounded overflow-x-auto">${s}</pre>
            </div>
          `);
			}
		})();
	}, f = [s], o[0] = s, o[1] = d, o[2] = f), useEffect(d, f);
	let p = `my-4 flex justify-center ${l || ""}`, m;
	return o[3] === p ? m = o[4] : (m = /* @__PURE__ */ jsx("div", {
		ref: u,
		className: p
	}), o[3] = p, o[4] = m), m;
};
export { MermaidDiagram_default as default };
