import Link from "next/link";
import type { ReactNode } from "react";
import { Logo } from "@/components/Logo";
import { LEGAL_LAST_UPDATED } from "@/lib/legal/constants";

type Props = {
  title: string;
  description?: string;
  children: ReactNode;
};

export function LegalPageLayout({ title, description, children }: Props) {
  return (
    <div className="min-h-screen bg-surface-dark">
      <header className="border-b border-gray-800 bg-black/30">
        <div className="mx-auto flex max-w-3xl items-center justify-between px-6 py-6">
          <Logo />
          <Link
            href="/"
            className="text-sm text-gray-400 transition-colors duration-300 hover:text-white"
          >
            ← Back to home
          </Link>
        </div>
      </header>

      <main className="mx-auto max-w-3xl px-6 py-12">
        <p className="mb-2 text-xs uppercase tracking-wider text-gray-500">
          Last updated: {LEGAL_LAST_UPDATED}
        </p>
        <h1 className="mb-3 text-3xl font-bold text-white">{title}</h1>
        {description && <p className="mb-10 text-gray-400">{description}</p>}

        <article className="prose prose-invert prose-gray max-w-none prose-headings:font-semibold prose-headings:text-white prose-p:text-gray-300 prose-li:text-gray-300 prose-strong:text-gray-200 prose-a:text-accent prose-a:no-underline hover:prose-a:underline">
          {children}
        </article>
      </main>

      <footer className="border-t border-gray-800 py-8 text-center text-xs text-gray-500">
        <div className="flex flex-wrap items-center justify-center gap-4">
          <Link href="/privacy" className="hover:text-gray-300">
            Privacy
          </Link>
          <Link href="/terms" className="hover:text-gray-300">
            Terms
          </Link>
          <Link href="/refund" className="hover:text-gray-300">
            Refund
          </Link>
          <a
            href="https://status.atakanozban.com/status/2"
            target="_blank"
            rel="noopener noreferrer"
            className="hover:text-gray-300"
          >
            Service Status
          </a>
        </div>
      </footer>
    </div>
  );
}