import { Link } from "@tanstack/react-router";
import { ArrowLeft } from "lucide-react";
import type { ReactNode } from "react";
import { legal } from "@/lib/legal";

export function LegalPage({
  eyebrow,
  title,
  intro,
  children,
}: {
  eyebrow: string;
  title: string;
  intro?: string;
  children: ReactNode;
}) {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <div className="mx-auto max-w-2xl px-4 pt-8 pb-16">
        <header className="flex items-center gap-3 px-1">
          <Link to="/legal" className="size-9 rounded-full glass grid place-items-center" aria-label="Back to legal">
            <ArrowLeft className="size-4" />
          </Link>
          <div>
            <p className="text-[11px] text-muted-foreground uppercase tracking-widest">{eyebrow}</p>
            <h1 className="text-2xl font-semibold">{title}</h1>
          </div>
        </header>

        <p className="mt-4 px-1 text-[11px] text-muted-foreground">
          Effective {legal.effective()} · Operated by {legal.entity()}
        </p>
        {intro && <p className="mt-3 px-1 text-[13px] text-muted-foreground leading-relaxed">{intro}</p>}

        <div className="mt-6 space-y-4">{children}</div>
      </div>
    </div>
  );
}

export function LegalSection({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="glass rounded-3xl p-5">
      <h2 className="text-sm font-semibold">{title}</h2>
      <div className="mt-2 space-y-2 text-[13px] leading-relaxed text-muted-foreground">{children}</div>
    </section>
  );
}

export function LegalList({ items }: { items: ReactNode[] }) {
  return (
    <ul className="space-y-1.5 pl-4 list-disc marker:text-electric">
      {items.map((it, i) => (
        <li key={i}>{it}</li>
      ))}
    </ul>
  );
}