import { raw } from "hono/html";
import type { KnowledgeEntry } from "../knowledge.ts";
import { renderMarkdown } from "../markdown.ts";
import { KnowledgeChart } from "./render.tsx";
import { parseKnowledgeBodySegments } from "./references.ts";

export async function KnowledgeBody({
  entry,
  className = "knowledge-entry-body",
}: {
  entry: KnowledgeEntry;
  className?: string;
}) {
  const segments = parseKnowledgeBodySegments(entry.body, entry.slug);
  const rendered = await Promise.all(segments.map(async (segment) => {
    if (segment.kind === "chart") {
      return <KnowledgeChart spec={segment.spec} />;
    }
    const html = await renderMarkdown(segment.source, { allowRawHtml: false });
    return raw(html);
  }));

  return <div class={`blog-content${className ? ` ${className}` : ""}`}>{rendered}</div>;
}