import { evaluate } from "@mdx-js/mdx";
import * as runtime from "react/jsx-runtime";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import type { Integration } from "muddle/contracts";

export async function renderMdx(source: string): Promise<string> {
	const module = await evaluate(source, { ...runtime });
	return renderToStaticMarkup(createElement(module.default));
}

export function mdxIntegration(): Integration {
	return { name: "mdx", setup(context) { context.loader("mdx", { name: "mdx", extensions: [".mdx"], async load(file) { return { data: {}, content: await renderMdx(file.source) }; } }); } };
}