import { Link, Outlet, createRootRoute } from "@tanstack/react-router"
import { Suspense, lazy } from "react"


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


export function Root() {
    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>

            <Outlet />
        </div>

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

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