import Link from "next/link";
import { Logo } from "@/components/ui/logo";
import { ThemeToggle } from "@/components/ui/theme";

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative flex min-h-dvh flex-col">
      <div className="absolute inset-0 -z-10 grid-bg opacity-60" aria-hidden />
      <header className="container-page flex h-16 items-center justify-between">
        <Logo />
        <div className="flex items-center gap-2 text-[13px] text-fg-muted">
          <Link href="/docs" className="hover:text-fg">Docs</Link>
          <ThemeToggle />
        </div>
      </header>
      <main className="flex flex-1 items-start justify-center px-4 pb-16 pt-6 sm:pt-12">
        <div className="w-full max-w-[400px] animate-fade-up">{children}</div>
      </main>
      <footer className="container-page pb-6 text-center text-[12px] text-fg-subtle">
        <Link href="/legal/terms" className="hover:text-fg">Terms</Link> · <Link href="/legal/privacy" className="hover:text-fg">Privacy</Link> · <a href="mailto:support@fetcha.co" className="hover:text-fg">support@fetcha.co</a>
      </footer>
    </div>
  );
}