import { Outlet, RouterProvider, ScrollRestoration, createBrowserRouter, redirect } from "react-router-dom"
import { HomePage } from "./HomePage";
import { GamePage } from "./GamePage";
import { AuthorPage } from "./AuthorPage";
import { css } from "@emotion/css";

const RouteRoot = () => {
	return <>
		{/* <Nav> */}
		<div className={css`
			min-height: 100vh;
			background-color: hsl(230, 10%, 10%);
			color: white;
		`}>
			<ScrollRestoration />
			<Outlet/>
		</div>
		{/* </Nav> */}
	</>
}

const router = createBrowserRouter([
	{
		element: <RouteRoot/>,
		children: [
			{
				path: "/",
				element: <HomePage/>,
				// loader: () => {
				// 	return redirect("/megachat");
				// }
			},
			{
				path: "/u/:author",
				element: <AuthorPage/>,
			},
			{
				path: "/u/:author/:slug",
				element: <GamePage/>,
			},
		],
	},
]);

export const Routing = () => <RouterProvider router={router} />;