text: /* eslint-disable no-unused-vars */
  import React from 'react';
  import { addToCart} from '../../store/cart';
  import { connect } from 'react-redux';
  import AppBar from '@material-ui/core/AppBar';
  import Button from '@material-ui/core/Button';
  import Card from '@material-ui/core/Card';
  import CardActions from '@material-ui/core/CardActions';
  import CardContent from '@material-ui/core/CardContent';
  import CardHeader from '@material-ui/core/CardHeader';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import Grid from '@material-ui/core/Grid';
  import Toolbar from '@material-ui/core/Toolbar';
  import Paper from '@material-ui/core/Paper';
  import Typography from '@material-ui/core/Typography';
  import Link from '@material-ui/core/Link';
  import { makeStyles } from '@material-ui/core/styles';
  import Container from '@material-ui/core/Container';
  
  const useStyles = makeStyles((theme) => ({
    '@global': {
      ul: {
        margin: 0,
        padding: 0,
        listStyle: 'none',
      },
    },
    appBar: {
      borderBottom: `1px solid ${theme.palette.divider}`,
    },
    toolbarTitle: {
      flex: 1,
    },
    link: {
      margin: theme.spacing(1, 1.5),
    },
    heroContent: {
      padding: theme.spacing(8, 0, 6),
    },
    cardHeader: {
      backgroundColor: theme.palette.grey[200]
    },
    fullHeight: {
      height: "100%"
    },
    footer: {
      borderTop: `1px solid ${theme.palette.divider}`,
      marginTop: theme.spacing(8),
      paddingTop: theme.spacing(3),
      paddingBottom: theme.spacing(3),
    },
  }));
  function Header (props) {
    const classes = useStyles();
    return (
      <header> 
      
        <CssBaseline />
        <AppBar position="static" color="auto" elevation={0} className={classes.appBar}>
          <Toolbar className={classes.toolbar}>
            <Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>
              General Store
            </Typography>
            {/* These get pushed to the right, becuase the classes.toolbarTitle sets flexGrow to 1... */}
            <nav>
              <Link variant="button" color="textPrimary" href="#" className={classes.link}>
                Features
              </Link>
              <Link variant="button" color="textPrimary" href="#" className={classes.link}>
                Enterprise
              </Link>
              <Link variant="button" color="textPrimary" href="#" className={classes.link}>
                Support
              </Link>
              <Link variant="button" color="textPrimary" href="#" className={classes.link}>
                Cart({props.Cart.cartProducts.length})
              </Link>
            </nav>
            <Button href="#" color="default" variant="outlined" className={classes.link}>
              Login
            </Button>
          </Toolbar>
        </AppBar>
      </header>
    );
  }
  const mapStateToProps = state => ({
    Cart: state.Cart,
  });
  
  const mapDispatchToProps = {addToCart};
    
  export default connect(mapStateToProps, mapDispatchToProps)(Header);