// Shared wrapper for the static legal pages (/privacy, /cookies, /terms,
// /returns) so they stay visually identical and each page file is just content.
export default function LegalPage({
  tag,
  title,
  lastUpdated,
  children,
}: {
  tag: string;
  title: string;
  lastUpdated: string;
  children: React.ReactNode;
}) {
  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <p className="tag-label text-splash-pink">{tag}</p>
      <h1 className="mt-2 font-display text-3xl">{title}</h1>
      <p className="mt-2 text-xs text-muted">Last updated: {lastUpdated}</p>

      <div className="mt-8 space-y-6 text-sm leading-relaxed text-ink [&_h2]:font-display [&_h2]:text-xl [&_h2]:pt-2 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5 [&_a]:text-clay hover:[&_a]:text-clay-dark [&_p]:text-muted [&_li]:text-muted">
        {children}
      </div>
    </div>
  );
}