import type { ReactNode } from 'react'

/**
 * 文档的一节：锚点 + 标题 + 说明。
 *
 * 每个组件一节，节内再用 Demo 摆具体用法，方便直接翻着找。
 */
type SectionProps = {
  /** 锚点 id，与左侧目录一致 */
  id: string
  title: string
  /** 右侧灰字，通常写组件名或导出路径 */
  api?: string
  desc?: ReactNode
  children: ReactNode
}

export function Section({ id, title, api, desc, children }: SectionProps) {
  return (
    <section id={id} className="doc-section">
      <div className="doc-section-title">
        <h2>{title}</h2>
        {api !== undefined && <code>{api}</code>}
      </div>
      {desc !== undefined && <p className="doc-section-desc">{desc}</p>}
      {children}
    </section>
  )
}