import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { compileMDXContent } from '@/lib/docs/mdx';
import { mdxComponents } from './mdx';
export async function MDXRenderer({ source, components: additionalComponents = {}, scope = {} }) {
    const { content, frontmatter, headings } = await compileMDXContent(source, {
        components: {
            ...mdxComponents,
            ...additionalComponents
        },
        scope
    });
    return /*#__PURE__*/ _jsxs("article", {
        className: "prose prose-slate dark:prose-invert max-w-none",
        children: [
            frontmatter.title && /*#__PURE__*/ _jsxs("header", {
                className: "mb-8 not-prose",
                children: [
                    /*#__PURE__*/ _jsx("h1", {
                        className: "text-3xl font-bold text-foreground mb-2",
                        children: frontmatter.title
                    }),
                    frontmatter.description && /*#__PURE__*/ _jsx("p", {
                        className: "text-lg text-muted-foreground",
                        children: frontmatter.description
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "mdx-content",
                children: content
            }),
            /*#__PURE__*/ _jsx("script", {
                type: "application/json",
                id: "mdx-frontmatter",
                dangerouslySetInnerHTML: {
                    __html: JSON.stringify(frontmatter)
                }
            }),
            /*#__PURE__*/ _jsx("script", {
                type: "application/json",
                id: "mdx-headings",
                dangerouslySetInnerHTML: {
                    __html: JSON.stringify(headings)
                }
            })
        ]
    });
}
/**
 * Table of Contents Component
 * 
 * Client component that renders a table of contents from headings
 */ export function TableOfContents({ headings }) {
    if (headings.length === 0) return null;
    return /*#__PURE__*/ _jsxs("nav", {
        className: "toc",
        children: [
            /*#__PURE__*/ _jsx("h4", {
                className: "text-sm font-semibold text-foreground mb-3",
                children: "On this page"
            }),
            /*#__PURE__*/ _jsx("ul", {
                className: "space-y-2 text-sm",
                children: headings.map((heading)=>/*#__PURE__*/ _jsx("li", {
                        style: {
                            paddingLeft: `${(heading.level - 1) * 12}px`
                        },
                        children: /*#__PURE__*/ _jsx("a", {
                            href: `#${heading.id}`,
                            className: "text-muted-foreground hover:text-foreground transition-colors",
                            children: heading.title
                        })
                    }, heading.id))
            })
        ]
    });
}
