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

const Maintenance = () => {
  return (
    <section className="hero is-large">
      <div className="hero-body has-text-centered">
        <p className="title is-1">🚧</p>
        <p className="subtitle">We are under maintenance.</p>
        <p>Please check back later. Thank you for your patience.</p>
      </div>
    </section>
  );
};

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