import type { ReactNode } from "react";
import Link from "next/link";
import "./legal.css";

export type LegalSlug = "terms" | "privacy" | "cookies" | "refund";

const legalTabs: { slug: LegalSlug; href: string; label: string }[] = [
  { slug: "terms", href: "/terms", label: "Terms & Conditions" },
  { slug: "privacy", href: "/privacy", label: "Privacy Policy" },
  { slug: "cookies", href: "/cookies", label: "Cookies Policy" },
  { slug: "refund", href: "/refund", label: "Refund Policy" },
];

export function LegalPage({
  slug,
  title,
  metaLabel,
  metaDate,
  toc,
  children,
}: {
  slug: LegalSlug;
  title: string;
  metaLabel: string;
  metaDate: string;
  toc: { id: string; label: string }[];
  children: ReactNode;
}) {
  return (
    <section className="wwd-section legal-section" id={slug}>
      <div className="wwd-inner">
        <div className="wwd-top-row">
          <span className="wwd-eyebrow">Legal</span>
          <nav className="legal-tabs" aria-label="Legal documents">
            {legalTabs.map((tab) => (
              <Link
                key={tab.slug}
                href={tab.href}
                data-oxy-href={tab.href}
                className={`legal-tab${tab.slug === slug ? " legal-tab--active" : ""}`}
                aria-current={tab.slug === slug ? "page" : undefined}
              >
                {tab.label}
              </Link>
            ))}
          </nav>
        </div>

        <div className="wwd-header-row">
          <div>
            <h1 className="wwd-headline">{title}</h1>
            <p className="legal-meta">
              {metaLabel}: {metaDate}
            </p>
          </div>
        </div>

        <div className="legal-grid">
          <nav className="legal-toc" aria-label="On this page">
            <p className="legal-toc-label">On this page</p>
            {/* The href carries the page's own path on purpose. The root
                layout sets <base href="/">, against which a bare "#id"
                resolves to "/#id" - so these links used to navigate to the
                home page instead of scrolling. data-oxy-scroll then hands a
                plain left-click to useOxyLinks(), which scrolls smoothly and
                updates the URL with replaceState; a native hash change would
                fire hashchange and trip the page builder's router into its
                "lost contact" screen. Targets carry scroll-margin-top via
                .legal-block, so they clear the fixed navbar. */}
            {toc.map((item) => (
              <a
                key={item.id}
                href={`/${slug}#${item.id}`}
                data-oxy-scroll={item.id}
                className="legal-toc-link"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div className="legal-prose">{children}</div>
        </div>
      </div>
    </section>
  );
}