import "./style.css";
import { Route, Router } from "@solidjs/router";
import { lazy, Suspense } from "solid-js";
import pkg from "../package.json";
import { render } from "solid-js/web";
import Root from "./routes/index";
import "virtual:uno.css";

const App = () => (
	<Router
		root={(props) => (
			<>
				<Suspense>{props.children}</Suspense>
				<span class="fixed br m-2 font-mono text-xs">
					{"v" + pkg.version}
				</span>
				<div class="i-solar-user-circle-bold fixed s-10 top-0 right-0 m-2 cursor-pointer" />
			</>
		)}
	>
		<Route path="/" component={lazy(() => import("./routes/index"))} />
		<Route
			path="/:game"
			component={lazy(() => import("./routes/[game]/index"))}
		/>
		<Route
			path="/:game/:instance"
			component={lazy(() => import("./routes/[game]/[instance]"))}
		/>
	</Router>
);

render(App, document.getElementById("app")!);