import { Link, usePage } from '@inertiajs/react';
import AppLogoIcon from '@/components/app-logo-icon';
import { home } from '@/routes';
import type { AuthLayoutProps } from '@/types';

export default function AuthSplitLayout({
    children,
    title,
    description,
}: AuthLayoutProps) {
    const { name } = usePage().props;

    return (
        <div className="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
            <div className="relative hidden h-full flex-col overflow-hidden bg-primary p-10 text-primary-foreground lg:flex">
                <Link href={home()} className="relative z-20 flex items-center gap-2 text-lg font-semibold">
                    <span className="flex size-8 items-center justify-center rounded-md bg-white/15">
                        <AppLogoIcon className="size-5" />
                    </span>
                    {name}
                </Link>

                <div className="relative z-20 mt-auto">
                    <div className="flex h-32 items-end gap-2 opacity-90">
                        {[45, 60, 50, 75, 65, 88, 72, 95].map((h, i) => (
                            <div key={i} className="flex-1 rounded-t bg-white/25" style={{ height: `${h}%` }} />
                        ))}
                    </div>
                    <blockquote className="mt-6 space-y-2">
                        <p className="text-lg">
                            Every metric, every source, in one governed view — with an AI analyst that speaks plain language.
                        </p>
                    </blockquote>
                </div>

                <div aria-hidden className="pointer-events-none absolute -right-16 -top-16 size-64 rounded-full bg-white/5" />
                <div aria-hidden className="pointer-events-none absolute -bottom-24 -left-10 size-72 rounded-full bg-white/5" />
            </div>

            <div className="w-full lg:p-8">
                <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
                    <Link href={home()} className="relative z-20 flex items-center justify-center gap-2 lg:hidden">
                        <span className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
                            <AppLogoIcon className="size-5" />
                        </span>
                        <span className="font-semibold">{name}</span>
                    </Link>
                    <div className="flex flex-col items-start gap-2 text-left sm:items-center sm:text-center">
                        <h1 className="text-xl font-medium">{title}</h1>
                        <p className="text-sm text-balance text-muted-foreground">{description}</p>
                    </div>
                    {children}
                </div>
            </div>
        </div>
    );
}