import './App.css';
import React from 'react'
import { BrowserRouter, Routes, Route } from "react-router-dom"

import Header from "./components/Header"
import Leaderboard from "./components/Leaderboard"
import Game from "./components/Game"
import About from "./components/About"

function App() { 

  return <div className="App">
    <BrowserRouter>
        <Header/>
        <div className="Container">
          <Routes>
            {/* https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router */}
            <Route path="/game" element={<Game/>} />
            <Route path="/game/proposal" element={<Game/>} />
            <Route path="/game/active" element={<Game/>} />
            <Route path="/game/archive" element={<Game/>} />
            
            <Route path="/leaderboard" element={<Leaderboard/>} />
            <Route path="/about" element={<About/>} />
          </Routes>
        </div>
    </BrowserRouter>
    </div>
}

export default App;