import React from "react";

type Props = {
  markdown?: string;
  html?: string;
};

export function LegalMarkdown({ markdown = '', html }: Props) {
  const derived = React.useMemo(() => {
    if (html && html.trim().length > 0) {
      return html;
    }

    const escaped = markdown
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');

    return escaped
      .split(/\n{2,}/)
      .map((block) => `<p>${block.replace(/\n/g, '<br/>')}</p>`)
      .join('\n');
  }, [markdown, html]);

  return (
    <div
      className="prose prose-sm max-w-none dark:prose-invert [&_:where(p,ul,ol,li)]:text-foreground [&_:where(h1,h2,h3,h4,h5,h6)]:text-foreground"
      dangerouslySetInnerHTML={{ __html: derived }}
    />
  );
}