import { Outlet } from "react-router-dom"
import { socialsList } from "../../../utility/socials"
import { SocialsInterface } from "../../../types"

export const AuthLayout = () => {
    return (
        <section
            className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden relative">
            <Outlet />
            <footer className="hidden w-full xl:flex flex-row gap-x-2 justify-end !absolute left-4 bottom-4">
                {socialsList?.map((item: SocialsInterface) => <img key={item?.name} src={item?.path} alt={item?.name} className="size-10 min-w-10 min-h-10 cursor-pointer" />)}
            </footer>
        </section>
    )
}