import { Button, Stack } from "@chakra-ui/react";
import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
import React from "react";

const TanStackRouterDevtools =
  process.env.NODE_ENV === "production"
    ? () => null // Render nothing in production
    : React.lazy(() =>
        // Lazy load in development
        import("@tanstack/router-devtools").then((res) => ({
          default: res.TanStackRouterDevtools,
          // For Embedded Mode
          // default: res.TanStackRouterDevtoolsPanel
        })),
      );

export const Route = createRootRoute({
  component: () => (
    <Stack padding={3}>
      <Stack flexDirection={"row"} justifyContent={"space-between"}>
        <Link to="/">
          <Button>Home</Button>
        </Link>

        <Stack flexDirection={"row"}>
          <Link to="/login">
            <Button>Sign in</Button>
          </Link>
          <Link to="/register">
            <Button>Sign up</Button>
          </Link>
        </Stack>
      </Stack>
      <hr style={{ padding: "4px" }} />
      <Outlet />
      <TanStackRouterDevtools />
    </Stack>
  ),
});