import React from "react";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import Navbar from "@/components/shared/Navbar";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Authenticate",
  description: "Secure login or registration to manage your account.",
  robots: {
    index: false,
    follow: false,
  },
};

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Navbar />
      <div className="flex min-h-[calc(100vh-80px)] flex-col items-center justify-center bg-zinc-50 px-4 pt-24 pb-12 dark:bg-zinc-950 lg:pt-32">
        <div className="w-full max-w-md mb-4 flex justify-start">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-zinc-500 hover:text-brand-accent transition-colors"
          >
            <ArrowLeft className="w-3.5 h-3.5" />
            Back to Home
          </Link>
        </div>
        <div className="w-full max-w-md space-y-8">{children}</div>
      </div>
    </>
  );
}