"use client";

import { useLocale } from "@/i18n/LocaleProvider";
import { LegalDoc } from "@/content/legal";
import { TranslationKey } from "@/i18n/dictionaries";

/** Shared layout for the Terms and Privacy documents: title, last-updated, intro, then sections. */
export function LegalPage({
  titleKey,
  doc,
}: {
  titleKey: TranslationKey;
  doc: Record<"en" | "ar", LegalDoc>;
}) {
  const { t, locale } = useLocale();
  const d = doc[locale];

  return (
    <article className="mx-auto max-w-3xl px-5 py-14 md:py-20">
      <h1 className="text-3xl font-extrabold tracking-tight md:text-4xl">{t(titleKey)}</h1>
      <p className="mt-2 text-sm text-muted">
        {t("legal.updated")} {d.updated}
      </p>
      <p className="mt-6 text-foreground/80">{d.intro}</p>

      <div className="mt-10 space-y-9">
        {d.sections.map((s) => (
          <section key={s.heading}>
            <h2 className="text-lg font-bold">{s.heading}</h2>
            <div className="mt-3 space-y-3 text-foreground/75">
              {s.body.map((p, i) => (
                <p key={i} className="leading-relaxed">
                  {p}
                </p>
              ))}
            </div>
          </section>
        ))}
      </div>
    </article>
  );
}