import type { ReactNode } from "react";
import { ChevronDown } from "lucide-react";

type MdDetailsProps = {
  title: string;
  /** 正文已渲染的 React 节点（markdown）；空正文可不传 */
  children?: ReactNode;
};

/**
 * [details 标题]…[/details] 折叠面板：原生 details/summary，无 JS、SSR 友好。
 * 正文 markdown 由调用方（MarkdownBody / MarkdownBodyClient）渲染后传入。
 */
export default function MdDetails({ title, children }: MdDetailsProps) {
  return (
    <details className="j13-md-details">
      <summary>
        <ChevronDown size={15} className="j13-md-details-caret" aria-hidden />
        <span className="j13-md-details-title">{title}</span>
      </summary>
      {children ? <div className="j13-md-details-body">{children}</div> : null}
    </details>
  );
}