import React from "react";
import { Route, Switch } from "react-router-dom";
import HomePage from "./home/HomePage";
import AboutPage from "./about/AboutPage";
import Header from "./layout/Header";
import PageNotFound from "./PageNotFound";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import SessionContainer from "../features/session/components/SessionContainer";
import { makeStyles } from "@material-ui/core/styles";
import { Container } from "@material-ui/core";

const useStyles = makeStyles(() => ({
  content: {
    "padding-left": "30px",
    "padding-right": "30px"
  }
}));

function App() {
  const classes = useStyles();

  return (
    <div>
      <Header />
      <br />
      <Container className={classes.content}>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/about" component={AboutPage} />
          <Route path="/sessions" component={SessionContainer} />
          <Route component={PageNotFound} />
        </Switch>
        <ToastContainer autoClose={3000} />
      </Container>
    </div>
  );
}

export default App;