"use client";

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize";
import remarkGfm from "remark-gfm";

/** Client-side markdown rendering for editor previews (same pipeline as the server renderer). */
export function MarkdownPreview({ children }: { children: string }) {
  return (
    <div className="markdown">
      {children.trim() ? (
        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw, rehypeSanitize]}>
          {children}
        </ReactMarkdown>
      ) : (
        <p className="type-body text-ink3">Nothing to preview</p>
      )}
    </div>
  );
}