const AuthLayout = ({children}: { children: React.ReactNode }) => {
    return (
        <div className="min-h-screen h-full flex">
            <div className={`auth-panel relative w-full h-full min-h-screen md:w-[28%] md:min-w-[525px] p-10 gap-5`}>
                <img src="/img/backgrounds/main.jpg" alt="auth page background"
                     className={`-z-10 inset-0 fixed w-full h-full min-h-100 md:w-[28%] md:min-w-[525px] object-cover object-center opacity-25`}/>
                <div className={`flex flex-col justify-between items-start h-full w-full`}>
                    <img src="/img/logo.png" alt="Mass Vocacy Logo"/>
                    <div className={`w-full my-5`}>{children}</div>
                    <p>Copyright © 2025 - Massvocacy. All Rights
                        Reserved</p>
                </div>
            </div>
            <div className="fixed right-0 h-screen hidden md:block w-[calc(100%-525px)]">
                <video
                    src="/videos/auth-page.webm"
                    autoPlay
                    loop
                    muted
                    playsInline
                    poster="/img/backgrounds/auth-page.jpg"
                    className="w-full h-full object-cover object-center"
                />
            </div>
        </div>
    );
};

export default AuthLayout;