import type { ReactNode } from "react";
import { parseContent, type ContentPart } from "../lib/parseContent";

/** Render a message body into inline parts: plain text as-is, while
 *  `<action>` / `<narration>` become muted italic spans (Miuix `--mu-text-lo`).
 *  Whitespace is preserved by the caller's `whitespace-pre-wrap` container — the
 *  returned nodes are just the segments dropped into it in order. */
export function renderContent(content: string): ReactNode[] {
  return parseContent(content).map((part, i) => renderPart(part, i));
}

function renderPart(part: ContentPart, key: number): ReactNode {
  if (part.type === "text") return <span key={key}>{part.text}</span>;
  return (
    <span key={key} className="italic text-[var(--mu-text-lo)]">
      {part.text}
    </span>
  );
}