import Image from "next/image";
import { ReactNode } from "react";
import Logo from '@/assets/logo/flow-logo.png';
import AuthBg from '@/assets/pages/auth/auth-bg.png';

type TAuthLayoutProps = {
  children: ReactNode;
};

const AuthLayout = ({ children }: TAuthLayoutProps) => {
  return (
    <div className="min-h-dvh bg-[radial-gradient(104.98%_69.99%_at_48.74%_47.88%,#2D3091_0%,#1B1D57_46.45%,#0D0E2B_73.56%,#000_97.57%)] bg-cover bg-no-repeat bg-center flex justify-center items-center">
      <Image
        src={AuthBg}
        alt="Auth background"
        fill
        sizes="100dvh"
        priority
        style={{
          objectFit: 'cover',
          objectPosition: 'center',
        }}
      />
      <div className='w-[80%] bg-[#13143b1a] backdrop-blur-[11.15px] h-[633px] border-l-[14px] border-[#D9D9D9] rounded-xl pt-[81px] pr-[74px] pb-[104px] pl-20 flex justify-between items-center col-span-7'>
        <div className='flex flex-col gap-14 w-[55%]'>
          <div>
            <Image
              src={Logo}
              alt='logo'
              height={150}
              width={136}
              priority
            />
          </div>
          <div className='text-white text-4xl/10'>
            The Middleware Platform That
            <br />
            Harmonizes Fintech Operations
          </div>
        </div>
        {children}
      </div>
    </div>
  );
};

export default AuthLayout;