"use client";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { rehypeCodeMeta, mdComponents } from "./MdCodeBlock";

export function ContentSection({ title, content, action }: { title?: string; content: string; action?: React.ReactNode }) {
  return (
    <section>
      {(title || action) && (
        <div className="flex items-center justify-between gap-3 mb-3">
          {title ? <h2 className="text-xl font-semibold text-white">{title}</h2> : <span />}
          {action}
        </div>
      )}
      <div className="prose-markdown">
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          rehypePlugins={[rehypeCodeMeta]}
          components={mdComponents}
        >
          {content}
        </ReactMarkdown>
      </div>
    </section>
  );
}
