import Image from "next/image";
import Link from "next/link";
import Logo from "@/components/Logo";
import { urlAsset } from "@/lib/utils/assets";
import styles from "./layout.module.css";

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className={styles.grille}>
      <div className={styles.colonneVisuelle}>
        <Image
          src={urlAsset("/uploads/produits/sac-avec-manche.jpg")}
          alt=""
          fill
          priority
          sizes="(min-width: 1024px) 50vw, 0px"
          className={styles.image}
        />
        <div className={styles.voile} />

        <div className={styles.contenuVisuel}>
          <Link href="/">
            <Logo variant="blanc" height={44} />
          </Link>
          <p className={styles.slogan}>
            Des sacs en papier kraft biodégradables qui transforment chaque commerce
            du Grand Nokoué en support publicitaire.
          </p>
        </div>
      </div>

      <div className={styles.colonneFormulaire}>
        <Link href="/" className={styles.logoMobile}>
          <Logo height={56} />
        </Link>
        {children}
      </div>
    </div>
  );
}