import React from "react";
import { Container, Grid, Typography, Button } from "@material-ui/core";
import ColourSwatches from "../general/ColourSwatches";
import { useDispatch } from "react-redux";
import { push } from "connected-react-router";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    gridContainer: {
        margin: theme.spacing(2, 0),
    },
}));

const HomePage = () => {
    const classes = useStyles();
    const dispatch = useDispatch();
    return (
        <Container maxWidth="xl" className={classes.gridContainer}>
            <Grid container direction="column" justify="center" alignItems="flex-start">
                <Typography variant="h4" component="h2">
                    Home Page
                </Typography>
                <Typography variant="body1">
                    This is a boilerplate app with GSC theming on Material-UI. See the README for details.
                </Typography>
                <ColourSwatches />
                <Button variant="contained" color="secondary" onClick={() => dispatch(push("/secondpage"))}>
                    Navigate to Second Page
                </Button>
            </Grid>
        </Container>
    );
};

export default HomePage;