import type { ReactElement } from "react";
import { MarkdownRenderer } from "./MarkdownRenderer";

interface MessageMarkdownProps {
  children: string;
  className?: string;
  [key: `data-${string}`]: string | undefined;
}

export function MessageMarkdown({ children, className = "message-body", ...props }: MessageMarkdownProps): ReactElement {
  return (
    <div className={className} {...props}>
      <MarkdownRenderer>{children}</MarkdownRenderer>
    </div>
  );
}

export function PlainMessageText({ children }: { children: string }): ReactElement {
  return <p>{children}</p>;
}
