import { mermaid_default as e } from "../../node_modules/mermaid/dist/mermaid.core.js";
import { useEffect as t, useRef as n } from "react";
import { jsx as r } from "react/jsx-runtime";
//#region src/components/dynamic-form/MermaidDiagram.tsx
e.initialize({
	startOnLoad: !1,
	theme: "default",
	securityLevel: "loose",
	flowchart: {
		useMaxWidth: !0,
		htmlLabels: !0
	}
});
var i = ({ chart: i, className: a }) => {
	let o = n(null);
	return t(() => {
		(async () => {
			let t = o.current;
			if (t) try {
				let n = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
				t.innerHTML = "";
				let { svg: r } = await e.render(n, i);
				o.current && (o.current.innerHTML = r);
			} catch (e) {
				console.error("Mermaid rendering error:", e), o.current && (o.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">${i}</pre>
            </div>
          `);
			}
		})();
	}, [i]), /* @__PURE__ */ r("div", {
		ref: o,
		className: `my-4 flex justify-center ${a || ""}`
	});
};
//#endregion
export { i as default };
