import ApplicationLogo from '@/Components/ApplicationLogo';
import { Link } from '@inertiajs/react';
import { PropsWithChildren } from 'react';

export default function AuthLayout({
    title,
    subtitle,
    children,
}: PropsWithChildren<{ title: string; subtitle?: string }>) {
    return (
        <div className="flex min-h-screen bg-surface">
            <div className="relative hidden w-1/2 flex-col justify-between bg-jgcp-navy px-16 py-16 text-white lg:flex">
                <Link href="/" className="w-fit rounded-lg bg-white p-3">
                    <ApplicationLogo className="h-auto w-40 sm:w-48" />
                </Link>

                <div>
                    <p className="text-label-caps text-accent-gold">Institutional Excellence in Global Leadership</p>
                    <h1 className="text-institute-title mt-4 max-w-md text-white">
                        Forge Your Path as a Global Strategic Leader.
                    </h1>
                    <p className="text-body-md mt-4 max-w-sm text-white/60">
                        Jolax Global Certification Programmes provide an elite educational environment for
                        executives, combining institutional authority with forward-thinking academic rigor.
                    </p>
                </div>

                <p className="text-footer-attribution text-accent-gold">Powered by Jolax Global Leadership Centre</p>
            </div>

            <div className="flex w-full flex-col items-center justify-center px-6 py-16 lg:w-1/2">
                <div className="w-full max-w-sm">
                    <Link href="/" className="text-lg font-bold tracking-tight text-jgcp-navy lg:hidden">
                        <ApplicationLogo className="h-auto w-40 sm:w-48" />
                    </Link>

                    <h2 className="text-institute-title mt-6 text-on-surface lg:mt-0">{title}</h2>
                    {subtitle && <p className="text-body-md mt-2 text-on-surface-variant">{subtitle}</p>}

                    <div className="mt-8">{children}</div>

                    <p className="text-footer-attribution mt-10 text-center text-accent-gold lg:hidden">
                        Powered by Jolax Global Leadership Centre
                    </p>
                </div>
            </div>
        </div>
    );
}