import "./App.css";
import Footer from "./Footer";
import Header from "./Header";
import Rankings from "./Rankings";
import { BrowserRouter, Routes, Route } from "react-router";
import { SessionProvider } from "./Session";
import { GraphComponent } from "./Network";
import MVPChart from "./MVPChart";
import { SetPassword } from "./SetPassword";
import { ThemeProvider } from "./ThemeProvider";
import TeamPanel from "./TeamPanel";

const Maintenance = () => {
  return (
    <div style={{ textAlign: "center", padding: "20px" }}>
      <h2>We are under maintenance.</h2>
      <p>Please check back later. Thank you for your patience.</p>
      <span style={{ fontSize: "xx-large" }}>🚧</span>
    </div>
  );
};

function App() {
  return (
    <ThemeProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/password" element={<SetPassword />} />
          <Route
            path="/*"
            element={
              <SessionProvider>
                <Header />
                <Routes>
                  <Route index element={<Rankings />} />
                  <Route path="network" element={<GraphComponent />} />
                  <Route path="mvp" element={<MVPChart />} />
                  <Route path="changepassword" element={<SetPassword />} />
                  <Route path="team" element={<TeamPanel />} />
                </Routes>
                <Footer />
              </SessionProvider>
            }
          />
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
}
export default App;