import { Link } from '@inertiajs/react';
import { motion, useReducedMotion } from 'motion/react';
import AppLogoIcon from '@/components/app-logo-icon';
import AuthCarousel from '@/components/auth-carousel';
import { home } from '@/routes';
import type { AuthLayoutProps } from '@/types';

export default function AuthSplitLayout({
    children,
    title,
    description,
}: AuthLayoutProps) {
    const shouldReduceMotion = useReducedMotion();

    return (
        <div className="grid min-h-svh lg:grid-cols-2">
            <div className="flex flex-col justify-center px-6 py-12 sm:px-10 lg:px-16">
                <motion.div
                    key={title}
                    initial={shouldReduceMotion ? false : { opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.35, ease: 'easeOut' }}
                    className="mx-auto flex w-full max-w-sm flex-1 flex-col justify-center"
                >
                    <Link
                        href={home()}
                        className="mb-10 flex items-center gap-2 font-semibold"
                    >
                        <span className="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg">
                            <AppLogoIcon className="size-5" />
                        </span>
                        <span className="text-lg">GestMaquis</span>
                    </Link>

                    <div className="mb-8 space-y-2">
                        <h1 className="text-foreground text-2xl font-bold tracking-tight">
                            {title}
                        </h1>
                        <p className="text-muted-foreground text-sm">
                            {description}
                        </p>
                    </div>

                    {children}
                </motion.div>

                <p className="text-muted-foreground mx-auto w-full max-w-sm pt-10 text-center text-xs">
                    © 2026 GestMaquis. Tous droits réservés. Créé par{' '}
                    <a
                        href="https://softsys.ci/"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="hover:text-foreground underline underline-offset-2"
                    >
                        Softsys.ci
                    </a>
                </p>
            </div>

            <div className="bg-primary text-primary-foreground relative hidden flex-col overflow-hidden p-12 lg:flex">
                <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,rgba(0,0,0,0.06),transparent_60%)]" />

                <AuthCarousel />
            </div>
        </div>
    );
}