"use client";

import ReactMarkdown, { type Components } from "react-markdown";
import remarkGfm from "remark-gfm";

import { MarkdownCodeBlock } from "@/components/markdown-code-block";
import { promoteDefinitionLists } from "@/lib/chat-definition-lists";

const markdownComponents: Components = {
  a: ({ children, href, ...props }) => (
    <a {...props} href={href} rel="noreferrer" target="_blank">
      {children}
    </a>
  ),
  table: ({ children }) => (
    <div className="markdown-table">
      <table>{children}</table>
    </div>
  ),
  pre: ({ children }) => <MarkdownCodeBlock>{children}</MarkdownCodeBlock>,
  ul: ({ children }) => <ul className="markdown-list">{children}</ul>,
  ol: ({ children }) => <ol className="markdown-list">{children}</ol>,
};

export function renderChatMarkdown(text: string) {
  return (
    <ReactMarkdown
      components={markdownComponents}
      remarkPlugins={[remarkGfm]}
      skipHtml
    >
      {promoteDefinitionLists(text)}
    </ReactMarkdown>
  );
}