import { Link } from "@/i18n/routing"
import Image from "next/image"

type Props = {
  children?: React.ReactNode
}

export default function LayoutAccount({ children }: Props) {
  return (
    <div className="flex items-center bg-[var(--primary--5)] min-h-screen h-lvh">
      <div className="hidden lg:flex px-4 md:px-8 lg:px-12 xl:px-20 lg:basis-1/2 lg:shrink-0 xl:basis-[55%] items-center justify-center flex-col">
        <Image
          src="/img/bg_login.png"
          alt="login"
          width={712}
          height={785}
          className="max-h-[83vh]"
        />
        <p className="pt-3">
          You can check Who we are? <Link href="/about" className="text-blue-500 hover:underline">About us</Link>.
        </p>
      </div>
      <div className="grow bg-white h-full py-4 px-4 md:p-8 xl:px-12 lg:min-w-80">{children}</div>
    </div>
  )
}