import { site } from "@/content/site";

type Report = (typeof site.intelligentReport.reports)[number];

type SkillExampleContentProps = {
  report: Report;
};

/**
 * 示例报告内容渲染 — 卡片弹窗与详情页「示例报告」tab 共用同一套结构与样式。
 * 外层（overlay/dialog/footer）由各自调用方自行包裹。
 */
export function SkillExampleContent({ report }: SkillExampleContentProps) {
  return (
    <div className="report-example-content">
      <header className="report-example-content__header flex flex-col gap-3">
        <p className="type-mono-caps-label text-body">{report.audience}</p>
        <h3 className="report-example-content__title type-display-lg text-balance text-ink">
          {report.example.title}
        </h3>
        <p className="type-mono-caption text-body">{report.example.meta}</p>
      </header>
      <div className="report-example-content__body">
        {report.example.sections.map((sec) => (
          <section key={sec.heading} className="report-example-section">
            <h4 className="type-caption-strong text-ink">{sec.heading}</h4>
            {"body" in sec && sec.body ? (
              <p className="type-body-md text-body">{sec.body}</p>
            ) : null}
            {"bullets" in sec && sec.bullets ? (
              <ul className="report-example-list">
                {sec.bullets.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            ) : null}
          </section>
        ))}
      </div>
    </div>
  );
}