import Footer from "@/components/layout/footer"
import Image from "next/image"

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen w-full">
      <div className="grid min-h-screen grid-cols-1 md:grid-cols-2">
        <div className="relative hidden md:block">
          <Image
            src="/silancar.jpg"
            alt="auth-image"
            fill
            priority
            className="object-cover object-center"
          />
        </div>

        <div className="flex flex-col justify-between bg-[url('/main-background.png')] bg-cover bg-center px-6 py-8 sm:px-10 md:px-12 lg:px-16">
          <div className="flex flex-1 items-center justify-center">
            <div className="w-full max-w-md">{children}</div>
          </div>

          <Footer />
        </div>
      </div>
    </div>
  )
}