import { lazy } from "react";
import { createBrowserRouter } from "react-router";
import { AppLayout } from "@/components/Layout/AppLayout.tsx";

const Home = lazy(() => import("./Home.tsx"));
const ImportReview = lazy(() => import("./ImportReview.tsx"));
const Manga = lazy(() => import("./Manga.tsx"));
const Chapter = lazy(() => import("./Chapter.tsx"));
const Login = lazy(() => import("./Login.tsx"));
const Register = lazy(() => import("./Register.tsx"));

export const Router = createBrowserRouter([
	{
		element: <AppLayout />,
		children: [
			{
				path: "*",
				element: <div>Not Found!</div>,
			},
			{
				index: true,
				element: <Home />,
			},
			{
				path: "/login",
				element: <Login />,
			},
			{
				path: "/register",
				element: <Register />,
			},
			{
				path: "/import-review",
				element: <ImportReview />,
			},
			{
				path: "/manga",
				children: [
					{
						path: ":mangaId",
						element: <Manga />,
					},
					{
						path: ":mangaId/chapter/:chapterId",
						element: <Chapter />,
					},
				],
			},
		],
	},
]);