import React from "react";
import GSCNavBar from "./components/navbar/";
import HomeRoute from "./routes/HomeRoute";
import SecondRoute from "./routes/SecondRoute";
import AnotherRoute from "./routes/AnotherRoute";
import RouteMapper from "./routes/RouteMapper";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    toolbar: theme.mixins.toolbar,
}));

const routes = [
    {
        path: "/home",
        render: ({ match }) => <HomeRoute match={match} />,
    },
    {
        path: "/secondpage",
        render: ({ match }) => <SecondRoute match={match} />,
    },
    {
        path: "/anotherpage",
        render: ({ match }) => <AnotherRoute match={match} />,
    },
];

const App = () => {
    const classes = useStyles();
    // There's an "extra" div in here as a simple way to make room for the NavBar
    return (
        <>
            <GSCNavBar />
            <div className={classes.toolbar} />
            <RouteMapper routes={routes} defaultRoute="/home" />
        </>
    );
};

export default App;