'use client';

import { ScrollArea } from '../ui/scroll-area';

const AuthLayout = ({
  children,
  title,
  des,
  image,
  isMap
}: {
  children: React.ReactNode;
  title: string;
  des: any;
  image?: any;
  isMap?: boolean;
}) => {
  return (
    <section className="flex min-h-screen items-center justify-center bg-gray-50">
      <div className=" px-4">
        {/* Left Section */}
        <div className="grid  grid-cols-1 xl:grid-cols-2">
          <div className="flex h-full flex-col items-center justify-center p-8 ">
            <div className={`w-full ${isMap ? 'h-full' : ''}`}>
              <h1 className="text-4xl font-bold text-gray-900">{title}</h1>
              <p className="mt-4 text-gray-500">{des}</p>
              <ScrollArea className="">
                <div className=" mr-2  mt-3 h-full  pb-1">{children}</div>
              </ScrollArea>
            </div>
          </div>

          {/* Right Section */}
          <div className="auth-image-bg my-auto hidden h-[calc(100vh-8vh)] rounded-xl xl:block">
            <div className="flex h-full items-center justify-center">
              <img src={image} alt="Auth Image" className="object-cover" />
            </div>
          </div>
        </div>
      </div>
    </section>

    // <div className="auth-page h-screen flex items-center justify-center ">
    //   <div className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 gap-10  overflow-hidden">
    //     <div className="hidden md:flex flex-col justify-center items-start p-8 md:p-10 lg:p-6  text-white">
    //       <span className="mb-8">
    //         <Icons.Logo  />
    //       </span>
    //       <p className="text-4xl font-semibold leading-tight lg:text-6xl">{title}</p>
    //       <p className="text-3xl mt-2  leading-relaxed lg:text-xl">{des}</p>
    //     </div>
    //     <main className="flex items-center justify-center rounded-lg p-8 md:p-10 lg:p-12 bg-white w-full">
    //       {children}
    //     </main>
    //   </div>
    // </div>
  );
};

export default AuthLayout;