import { redirect } from 'next/navigation';
import { auth } from '@/auth';
import Image from 'next/image';
import { Montserrat } from 'next/font/google';

const montserrat = Montserrat({
  subsets: ['latin'],
  weight: ['200', '500', '600'],
});

export default async function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await auth();
  if (session?.user) redirect('/dashboard');

  return (
    <div className="min-h-screen flex items-center justify-center bg-zinc-950">
      <div className="w-full max-w-md px-4">
        {/* Logo / Brand */}
        <div className="text-center mb-8">
          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-md bg-black border border-zinc-800 shadow-2xl">
            <Image src="/logo.svg" alt="Logo" width={32} height={32} />
          </div>

          <div className={`${montserrat.className} mt-4`}>
            <span className="block text-2xl font-light tracking-wide text-white leading-none">
              TWO TALES
            </span>

            <span className="block text-[11px] tracking-[0.28em] italic uppercase text-zinc-500 leading-none mt-1">
              vfx review
            </span>
          </div>
        </div>
        {children}
      </div>
    </div>
  );
}