import { useMemo } from 'react';
import { renderMarkdown } from '#/lib/markdown.js';
import { cn } from '#/lib/utils.js';

/**
 * Prose somebody wrote about the work rather than in it: a pull request's
 * description, a review, an issue and the words under it.
 *
 * The same renderer a README gets, and for the same reason. The words come out
 * of an account this page does not control, so raw HTML in them is printed
 * rather than parsed, and a link may only name a scheme this page is willing
 * to follow.
 *
 * An image by a repository-relative path is left as its alt text. A README is
 * a file in a tree and a path beside it means something; a review names no
 * tree, so there is nothing for the path to be relative to. An absolute
 * address still loads, because that names its own place.
 */
export function Prose({ text, className }) {
  const html = useMemo(() => renderMarkdown(text), [text]);
  if (!text) return null;
  return (
    <div
      className={cn('markdown markdown-prose', className)}
      // Every tag here was written by renderMarkdown, which prints the
      // author's own HTML rather than parsing it.
      // biome-ignore lint/security/noDangerouslySetInnerHtml: the renderer emits only its own tags
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}