import { Link, createRootRoute, useMatch, useMatches } from "@tanstack/react-router"
import { AnimatePresence } from "framer-motion"
import { Suspense, lazy } from "react"
import { AnimatedOutlet } from "../AnimatedOutlet"


const TanStackRouterDevtools = process.env.NODE_ENV === "production"
    ? () => null
    : lazy(() => import("@tanstack/router-devtools").then(res => ({
        default: res.TanStackRouterDevtools
    })))


export function Root() {

    const matches   = useMatches()
    const match     = useMatch({ strict: false })
    const nextMatch = matches[ matches.findIndex(d => d.id === match.id) + 1 ]


    return <>
        <div className="container mx-auto mt-8">
            <div className="flex flex-row gap-2 justify-center content-center">
                <Link to="/">
                    Home
                </Link>

                <Link to="/about">
                    About
                </Link>
            </div>

            <AnimatePresence mode="popLayout">
                <AnimatedOutlet
                    key={nextMatch.id}
                    initial={{ x: "100%" }}
                    animate={{ x: "0" }}
                />
            </AnimatePresence>
        </div>

        <Suspense><TanStackRouterDevtools /></Suspense>
    </>

}

export const Route = createRootRoute({ component: Root })