import type { LegalDocument } from "@/lib/legal-content";

export default function LegalDocument({ document }: { document: LegalDocument }) {
  return (
    <article className="mx-auto w-full max-w-4xl space-y-10 px-4 py-10 sm:px-6 lg:px-8">
      <header className="space-y-4 border-b border-border pb-8">
        <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">{document.title}</h1>
        <p className="max-w-3xl text-lg leading-8 text-muted-foreground">{document.intro}</p>
        <p className="text-sm text-muted-foreground">{document.updatedLabel}</p>
      </header>
      <div className="space-y-8">
        {document.sections.map((section) => (
          <section key={section.heading} className="space-y-3">
            <h2 className="text-2xl font-semibold tracking-tight">{section.heading}</h2>
            {section.paragraphs?.map((paragraph) => <p key={paragraph} className="whitespace-pre-line leading-8 text-foreground">{paragraph}</p>)}
            {section.list ? <ul className="list-inside list-disc space-y-2 leading-8 text-foreground">{section.list.map((item) => <li key={item}>{item}</li>)}</ul> : null}
          </section>
        ))}
      </div>
    </article>
  );
}