import { Link } from 'react-router-dom';
import { getLegalDocument, type LegalDocument } from '@dukang/shared-types';

type LegalPageProps = {
  docId: LegalDocument['id'];
  /** 返回登录页的路径，如 /login */
  backTo?: string;
};

/** H5 各端共用的协议/隐私正文页 */
export default function LegalPage({ docId, backTo = '/login' }: LegalPageProps) {
  const doc = getLegalDocument(docId);

  return (
    <div className="legal-h5-page">
      <header className="legal-h5-header">
        <Link to={backTo} className="legal-h5-back" aria-label="返回">
          ‹
        </Link>
        <h1 className="legal-h5-title">{doc.title}</h1>
      </header>
      <main className="legal-h5-body">
        <p className="legal-h5-updated">更新日期：{doc.updatedAt}</p>
        <p className="legal-h5-intro">{doc.intro}</p>
        {doc.sections.map((section) => (
          <section key={section.heading} className="legal-h5-section">
            <h2>{section.heading}</h2>
            {section.paragraphs.map((p, i) => (
              <p key={`${section.heading}-${i}`}>{p}</p>
            ))}
          </section>
        ))}
      </main>
    </div>
  );
}