import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Landing from '/src/landing/Landing.jsx';
import HistoryView from '/src/page/HistoryView.jsx';
import LogIn from '/src/login/LogIn.jsx';
import Register from '/src/login/Register.jsx';
import Profile from '/src/login/Profile.jsx';
import GhostPage from '/src/page/GhostPage.jsx';
import Live from '/src/embodied/Live.jsx';

import AuthProvider from '/src/AuthProvider.jsx';

import './App.css';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Landing/>}/>
            <Route path="/login" element={<LogIn/>}/>
            <Route path="/register" element={<Register/>}/>
            <Route path="/:pagenumber" element={<GhostPage/>}/>
            <Route path="/:pagenumber/edit" element={<GhostPage editing="true"/>}/>
            <Route path="/:pagenumber/history" element={<HistoryView/>}/>
            <Route path="/:pagenumber/:editid" element={<GhostPage/>}/>
            <Route path="/profile" element={<Profile/>}/>
            <Route path="/live" element={<Live/>}/>
          </Routes>
        </BrowserRouter>
      </AuthProvider>
    </QueryClientProvider>
  );
}

export default App;