"use client";
import { cn } from "./index3.js";
import { createCodeComponent } from "./index416.js";
import * as React from "react";
import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
import ReactMarkdown from "react-markdown";
import rehypeKatex from "rehype-katex";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
//#region src/components/organisms/ai/_shared/markdown-renderer.tsx
var remarkPlugins = [remarkGfm, remarkMath];
var rehypePlugins = [[rehypeKatex, { output: "mathml" }]];
var variantColors = {
	heading: {
		default: "text-foreground",
		inverted: "text-primary-foreground"
	},
	body: {
		default: "text-secondary-foreground",
		inverted: "text-primary-foreground/90"
	},
	link: {
		default: "text-primary",
		inverted: "text-primary-foreground"
	},
	muted: {
		default: "text-muted-foreground",
		inverted: "text-primary-foreground/70"
	},
	faint: {
		default: "text-quaternary-foreground",
		inverted: "text-primary-foreground/50"
	},
	border: {
		default: "border-border",
		inverted: "border-primary-foreground/25"
	},
	bgMuted: {
		default: "bg-muted",
		inverted: "bg-primary-foreground/20"
	}
};
function vc(variant, token) {
	return variantColors[token][variant];
}
function createMarkdownComponents(variant) {
	return {
		h1: ({ className, children, ...props }) => /* @__PURE__ */ jsx("h1", {
			className: cn("text-display-xs font-bold mt-6 mb-4", vc(variant, "heading"), className),
			...props,
			children
		}),
		h2: ({ className, children, ...props }) => /* @__PURE__ */ jsx("h2", {
			className: cn("text-xl font-semibold mt-5 mb-3", vc(variant, "heading"), className),
			...props,
			children
		}),
		h3: ({ className, children, ...props }) => /* @__PURE__ */ jsx("h3", {
			className: cn("text-lg font-semibold mt-4 mb-2", vc(variant, "heading"), className),
			...props,
			children
		}),
		h4: ({ className, children, ...props }) => /* @__PURE__ */ jsx("h4", {
			className: cn("text-base font-semibold mt-3 mb-2", vc(variant, "heading"), className),
			...props,
			children
		}),
		p: ({ className, children, ...props }) => /* @__PURE__ */ jsx("p", {
			className: cn("text-base leading-relaxed mb-4", vc(variant, "body"), className),
			...props,
			children
		}),
		ul: ({ className, children, ...props }) => /* @__PURE__ */ jsx("ul", {
			className: cn("list-disc list-inside mb-4 space-y-1", vc(variant, "body"), className),
			...props,
			children
		}),
		ol: ({ className, children, ...props }) => /* @__PURE__ */ jsx("ol", {
			className: cn("list-decimal list-inside mb-4 space-y-1", vc(variant, "body"), className),
			...props,
			children
		}),
		li: ({ className, children, ...props }) => /* @__PURE__ */ jsx("li", {
			className: cn("leading-relaxed", className),
			...props,
			children
		}),
		a: ({ className, children, href, ...props }) => /* @__PURE__ */ jsx("a", {
			href,
			className: cn("underline underline-offset-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring rounded-sm", vc(variant, "link"), variant === "default" && "hover:text-primary", variant === "inverted" && "hover:text-primary-foreground", className),
			target: "_blank",
			rel: "noopener noreferrer",
			...props,
			children
		}),
		blockquote: ({ className, children, ...props }) => /* @__PURE__ */ jsx("blockquote", {
			className: cn("border-s-4 ps-4 py-2 my-4 italic", vc(variant, "muted"), vc(variant, "border"), className),
			...props,
			children
		}),
		code: createCodeComponent(variant),
		pre: ({ children }) => /* @__PURE__ */ jsx(Fragment$1, { children }),
		hr: ({ className, ...props }) => /* @__PURE__ */ jsx("hr", {
			className: cn("my-6", vc(variant, "border"), className),
			...props
		}),
		table: ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", {
			className: "overflow-x-auto my-4",
			role: "region",
			"aria-label": "Data table",
			children: /* @__PURE__ */ jsx("table", {
				className: cn("min-w-full border-collapse border", vc(variant, "border"), variant === "inverted" && "!bg-transparent", className),
				...props,
				children
			})
		}),
		thead: ({ className, children, ...props }) => /* @__PURE__ */ jsx("thead", {
			className: cn(variant === "default" ? vc(variant, "bgMuted") : "!bg-transparent", className),
			...props,
			children
		}),
		tbody: ({ className, children, ...props }) => /* @__PURE__ */ jsx("tbody", {
			className: cn(variant === "default" ? "divide-y divide-border" : "divide-y divide-primary-foreground/20", className),
			...props,
			children
		}),
		tr: ({ children, ...props }) => /* @__PURE__ */ jsx("tr", {
			...props,
			children
		}),
		th: ({ className, children, ...props }) => /* @__PURE__ */ jsx("th", {
			className: cn("px-4 py-2 text-start text-sm font-semibold border", vc(variant, "body"), vc(variant, "border"), variant === "inverted" && "!bg-transparent", className),
			...props,
			children
		}),
		td: ({ className, children, ...props }) => /* @__PURE__ */ jsx("td", {
			className: cn("px-4 py-2 text-sm border", vc(variant, "body"), vc(variant, "border"), variant === "inverted" && "!bg-transparent", className),
			...props,
			children
		}),
		strong: ({ className, children, ...props }) => /* @__PURE__ */ jsx("strong", {
			className: cn("font-semibold", vc(variant, "heading"), className),
			...props,
			children
		}),
		em: ({ children, ...props }) => /* @__PURE__ */ jsx("em", {
			...props,
			children
		}),
		del: ({ className, children, ...props }) => /* @__PURE__ */ jsx("del", {
			className: cn("line-through", vc(variant, "faint"), className),
			...props,
			children
		}),
		img: ({ className, alt, src, ...props }) => /* @__PURE__ */ jsx("img", {
			src,
			alt,
			className: cn("max-w-full h-auto rounded-lg my-4", className),
			loading: "lazy",
			...props
		})
	};
}
var componentCache = /* @__PURE__ */ new Map();
function getComponents(variant) {
	let cached = componentCache.get(variant);
	if (!cached) {
		cached = createMarkdownComponents(variant);
		componentCache.set(variant, cached);
	}
	return cached;
}
var MarkdownRenderer = React.memo(function MarkdownRenderer({ children, className, variant = "default" }) {
	const components = getComponents(variant);
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "ai-markdown",
		className: cn("prose prose-gray max-w-none", className),
		children: /* @__PURE__ */ jsx(ReactMarkdown, {
			remarkPlugins,
			rehypePlugins,
			components,
			children
		})
	});
});
MarkdownRenderer.displayName = "MarkdownRenderer";
//#endregion
export { MarkdownRenderer };

//# sourceMappingURL=index417.js.map