import { lazy, Suspense } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { PwaUpdatePrompt } from "./components/pwa/PwaUpdatePrompt";
import { ChatLayout } from "./components/layout/ChatLayout";
import { AvatarProvider } from "./context/AvatarContext";
import { ChatProvider } from "./context/ChatContext";
import { ChatPage } from "./routes/ChatPage";

const SettingsPage = lazy(() => import("./routes/SettingsPage"));

export function App() {
	return (
		<BrowserRouter>
			<AvatarProvider>
				<ChatProvider>
					<Routes>
						<Route path="/" element={<ChatLayout />}>
							<Route index element={<ChatPage />} />
						</Route>
						<Route
							path="/settings"
							element={
								<Suspense fallback={null}>
									<SettingsPage />
								</Suspense>
							}
						/>
					</Routes>
					<PwaUpdatePrompt />
				</ChatProvider>
			</AvatarProvider>
		</BrowserRouter>
	);
}
