import { createRoot } from "react-dom/client";
import "./index.css";
import { BrowserRouter, Route, Routes } from "react-router";
import DefaultLayout from "./components/DefaultLayout.tsx";
import IndexPage from "./routes/index.tsx";
import { LoginPage } from "./routes/login.tsx";
import { OnboardCompletePage } from "./routes/onboard/complete.tsx";
import { OnboardIndex } from "./routes/onboard/index.tsx";
import { OnboardLanguagePage } from "./routes/onboard/language.tsx";
import { OnboardLayout } from "./routes/onboard/layout.tsx";
import { OnboardSetupPage } from "./routes/onboard/setup.tsx";
import { SignupPage } from "./routes/signup.tsx";

const root = createRoot(document.getElementById("root")!);

root.render(
	<BrowserRouter>
		<Routes>
			<Route element={<DefaultLayout />}>
				<Route index element={<IndexPage />} />
				<Route path="onboard" element={<OnboardLayout />}>
					<Route index element={<OnboardIndex />} />
					<Route path="setup" element={<OnboardSetupPage />} />
					<Route path="language" element={<OnboardLanguagePage />} />
					<Route path="complete" element={<OnboardCompletePage />} />
				</Route>
				<Route>
					<Route path="login" element={<LoginPage />} />
					<Route path="signup" element={<SignupPage />} />
				</Route>
			</Route>
		</Routes>
	</BrowserRouter>,
);
