import type { LegalDoc } from "@/lib/content";
import { PageHero } from "../PageHero";
import { LegalContents } from "./LegalContents";

/** Shared layout for the privacy, terms, cookies and legal documents. */
export function LegalArticle({ doc }: { doc: LegalDoc }) {
  return (
    <>
      <PageHero
        title={doc.title}
        accent={doc.titleAccent}
        lead={`Last updated: ${doc.updated}`}
      />

      <section className="webContent py-4 py-lg-5">
        <div className="container">
          <div className="row g-4 g-xl-5">
            <div className="d-none d-lg-block col-12 col-lg-4 col-xl-3">
              <LegalContents sections={doc.sections} />
            </div>
            <div className="col-12 col-lg-8 col-xl-9">
              {doc.sections.map((s) => (
                <article className="legal-section" id={s.id} key={s.id}>
                  <div className="legal-section-head">
                    <h2 className="text-xl fw-600 mb-0">{s.heading}</h2>
                  </div>
                  {s.body.map((p) => (
                    <p className="text-md fw-400 mb-0" key={p.slice(0, 40)}>
                      {p}
                    </p>
                  ))}
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}