/** Simple markdown → HTML renderer. */
function renderMarkdown(md: string): string {
  return md
    .replace(/^### (.+)$/gm, '<h3 class="text-base font-semibold mt-4 mb-2">$1</h3>')
    .replace(/^## (.+)$/gm, '<h2 class="text-lg font-semibold mt-5 mb-2">$1</h2>')
    .replace(/^# (.+)$/gm, '<h1 class="text-xl font-bold mt-6 mb-3">$1</h1>')
    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
    .replace(/\*(.+?)\*/g, "<em>$1</em>")
    .replace(/`(.+?)`/g, '<code class="font-mono text-sm px-1.5 py-0.5 rounded" style="background:var(--z-card-bg)">$1</code>')
    .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2" target="_blank" style="color:var(--z-accent-light);text-decoration:underline">$1</a>')
    .replace(/^- (.+)$/gm, '<li class="ml-4 list-disc">$1</li>')
    .replace(/^(\d+)\. (.+)$/gm, '<li class="ml-4 list-decimal">$2</li>')
    .replace(/\n\n/g, "</p><p>")
    .replace(/\n/g, "<br>");
}

interface RichTextProps {
  content: string;
}

export function RichText({ content }: RichTextProps) {
  return (
    <div
      class="text-sm leading-relaxed mb-4"
      dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }}
    />
  );
}
