import { ThemeProvider } from "@/context/ThemeContext";
import Image from "next/image";
import React from "react";
import GuestGuard from "@/components/auth/GuestGuard";

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <GuestGuard>
      <div className="relative bg-white z-1 sm:p-0">
        <ThemeProvider>
          <div className="relative p-6 flex lg:flex-row w-full h-screen justify-center flex-col sm:p-0">
          {children}
          <div className="lg:w-1/2 w-full h-full bg-brand-950 lg:grid items-center hidden">
            <div className="relative items-center justify-center  flex z-1">
              <div className="absolute right-0 top-0 -z-1 w-full max-w-[250px] xl:max-w-[450px]">
                <Image 
                  alt="grid" 
                  loading="lazy" 
                  width={540} 
                  height={254}
                  src="/images/shape/grid-01.svg" 
                />
              </div>
              <div className="absolute bottom-0 left-0 -z-1 w-full max-w-[250px] rotate-180 xl:max-w-[450px]">
                <Image 
                  alt="grid" 
                  loading="lazy" 
                  width={540} 
                  height={254}
                  src="/images/shape/grid-01.svg" 
                />
              </div>
              <div className="flex flex-col items-center max-w-xs">
                <Image
                  width={231}
                  height={48}
                  src="./images/logo/logo.svg"
                  alt="Logo"
                />
              </div>
            </div>
          </div>
        </div>
      </ThemeProvider>
    </div>
    </GuestGuard>
  );
}