import { createRootRoute, Outlet } from "@tanstack/react-router";
// import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import { useEffect } from "react";
import { getSerwist } from "virtual:serwist";
import { ThemeProvider } from "~/hooks/use-theme";

export const Route = createRootRoute({
    component: RootLayout,
});

function RootLayout() {
    useEffect(() => {
        const loadSerwist = async () => {
            if ("serviceWorker" in navigator) {
                const serwist = await getSerwist();

                serwist?.addEventListener("installed", () => {
                    console.log("Serwist installed!");
                });

                void serwist?.register();
            }
        };

        loadSerwist();
    }, []);
    return (
        <ThemeProvider>
            <Outlet />
            {/*<TanStackRouterDevtools />*/}
        </ThemeProvider>
    );
}