import { Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import { home } from '@/routes';

function BrandLogo({ className }: { className: string }) {
    return (
        <>
            <img
                src="/images/logo-full-light.png"
                alt="ZozTrip"
                width={175}
                height={130}
                className={cn(className, 'dark:hidden')}
            />
            <img
                src="/images/logo-full.png"
                alt="ZozTrip"
                width={178}
                height={142}
                className={cn(
                    className,
                    'hidden brightness-0 invert dark:block',
                )}
            />
        </>
    );
}

export default function AuthBrandLayout({ children }: { children: ReactNode }) {
    return (
        <div className="flex min-h-dvh bg-white font-google text-navy dark:bg-ink dark:text-white">
            <div className="flex w-full flex-col px-5 py-5 sm:px-10 lg:w-[46%] lg:py-8">
                <div className="flex items-center justify-between">
                    <Link
                        href={home()}
                        className="flex items-center gap-2 text-base font-medium transition-colors hover:text-gold-dark sm:text-lg"
                    >
                        <ArrowLeft className="size-5" />
                        go back
                    </Link>
                    <Link href={home()} className="lg:hidden">
                        <BrandLogo className="h-10 w-auto" />
                    </Link>
                </div>

                <div className="flex flex-1 items-center justify-center py-6">
                    <div className="w-full max-w-md">{children}</div>
                </div>
            </div>

            <div className="hidden p-3 lg:block lg:flex-1">
                <div className="flex h-full items-center justify-center rounded-3xl bg-cream dark:bg-ocean">
                    <BrandLogo className="h-36 w-auto" />
                </div>
            </div>
        </div>
    );
}