import { useMemo } from "react";

import type { UrlResources } from "../lib/attachmentUrls";
import { renderMarkdown } from "../lib/markdown";

interface Props {
  source: string;
  /** 列表里只给个开头时用它压小字号 */
  compact?: boolean;
  className?: string;
  /** 附件 id → 当前可访问地址（后端签发的 raw_url） */
  resources?: UrlResources;
}

/**
 * 只读的 Markdown 渲染。
 *
 * renderMarkdown 内部已经把原文全部 HTML 转义过再套标签，
 * 这里放心用 dangerouslySetInnerHTML（这是本仓库唯一允许用的地方）。
 */
export function Markdown({ source, compact = false, className = "", resources }: Props) {
  const html = useMemo(() => renderMarkdown(source ?? "", resources), [source, resources]);

  if (!source?.trim()) {
    return <p className={`text-sm text-ink-400 ${className}`}>还没有内容。</p>;
  }

  return (
    <div
      className={[
        "prose-dadao text-sm leading-6 text-ink-800",
        compact ? "prose-compact" : "",
        className,
      ].join(" ")}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}