import { MDXRemote } from "next-mdx-remote/rsc";
import remarkGfm from "remark-gfm";
import rehypeSlug from "rehype-slug";
import rehypePrettyCode from "rehype-pretty-code";

import { blogMdxComponents } from "@/components/blog/mdx-components";
import styles from "./blog.module.css";

/**
 * Renders an MDX article body inside the design's prose column. Cached: MDX
 * compilation reads the current time, which Cache Components only allows inside
 * a "use cache" boundary (the compiled output is deterministic per source).
 */
export async function PostBody({ source }: { source: string }) {
  "use cache";
  return (
    <article className={styles.prose}>
      <MDXRemote
        source={source}
        components={blogMdxComponents}
        options={{
          mdxOptions: {
            remarkPlugins: [remarkGfm],
            rehypePlugins: [
              rehypeSlug,
              [
                rehypePrettyCode,
                { theme: "github-dark-dimmed", keepBackground: false },
              ],
            ],
          },
        }}
      />
    </article>
  );
}