import logo from './logo.svg';
import React, { useState } from "react";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

import './App.css';
import './fonts/index.css';
import { GoodTimesBar } from "./GoodTimesBar.js";
import { GlobalContext } from "./GlobalContext.js";
import Container from '@mui/material/Container';
import Paper from '@mui/material/Paper';
import SignIn from "./SignIn.js";
import SignUp from "./SignUp.js";
import { borderLeft } from '@mui/system';

function App() {
  const [ user, setUser ] = useState(null);

  return (
    <div className="App">
      <GlobalContext.Provider value={{user, setUser}}>
        <GoodTimesBar />
        <Container className="Content">
          <Routes>
            <Route path="/signin" element={<SignIn />}/>
            <Route path="/signup" element={<SignUp />}/>
            <Route path="/password" element={
              <Paper>Not implemented... yet.</Paper>
            }/>
            <Route path="/" element={
              <Paper style={{
                flexDirection: 'column',
                display: 'flex'
              }}>
                <div style={{ fontWeight: 'bold' }}>Goodtimes</div>
                <div>The eventual new site for the legacy Beer Tuesday... coming soon...
                </div>
                </Paper>
            }/>
          </Routes>
        </Container>
      </GlobalContext.Provider>
    </div>
  );
}

export default App;