import { ReactNode } from "react";

type LegalPageProps = {
  title: string;
  updatedAt: string;
  intro: string;
  children: ReactNode;
};

export function LegalPage({ title, updatedAt, intro, children }: LegalPageProps) {
  return (
    <main className="mx-auto w-full max-w-4xl px-5 py-16 md:px-8 md:py-24">
      <div className="rounded-[2rem] border border-[var(--line)] bg-white p-8 shadow-[0_28px_80px_rgba(15,23,42,0.08)] md:p-12">
        <p className="text-xs font-bold uppercase tracking-[0.24em] text-[var(--accent)]">
          Legal
        </p>
        <h1 className="mt-4 font-heading text-4xl font-extrabold tracking-[-0.04em] text-[var(--ink)] md:text-5xl">
          {title}
        </h1>
        <p className="mt-4 text-sm font-semibold text-[var(--muted)]">Last updated: {updatedAt}</p>
        <p className="mt-6 text-base leading-8 text-[var(--muted)]">{intro}</p>
        <div className="legal-content mt-10 space-y-8">{children}</div>
      </div>
    </main>
  );
}
