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";

const Version = () => (
	<div class="full free clear">
		<span
			style={{
				margin: "5px",
				"font-size": "0.8rem",
				"font-family": "monospace",
				"pointer-events": "all",
			}}
			class="fixed-br"
		>
			v{pkg.version}
		</span>
	</div>
);

const App = () => (
	<Router
		root={(props) => (
			<>
				<Suspense>{props.children}</Suspense>
				<Version />
			</>
		)}
	>
		<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")!);