import React from "react";
import { makeStyles } from "@material-ui/core/styles";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";

import Selling from "assets/img/service/selling.png";
import Service from "assets/img/service/service.jpg";
import Sparepart from "assets/img/service/sparepart.jpg";

const useStyles = makeStyles(styles);
const DataService = function ({ backend, service, ...props })  {
    const classes = useStyles();
    return (
      <div className={classes.section} id="notifications" style={{marginTop:"-38px"}}>
        <div align="center">
            <div align="center" className={classes.section} id="notifications">
                <SnackbarContent
                align="center"
                color="info"
                />
            </div>
        </div>
        <div>
          <GridContainer style={{padding: "40px"}} justify="center">
            <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
              <Card style={{width: "20rem"}}>
                <div align="center" className="container">
                  <img style={{height: "180px", width: "300px", display: "block"}} className="image" className={classes.imgCardTop} src={Selling}/>
                  <div className="middle">
                    <div className="text">Selling</div>
                  </div>
                </div>
              </Card>
              <div align="center">
                <Button color="info" round href="/yamaha/product/product" target="_blank">
                    <Icon className={classes.icons}>open_in_new</Icon>View More Selling
                </Button>
              </div>
            </Grid>
            <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
              <Card style={{width: "20rem"}}>
                <div align="center" className="container">
                  <img style={{height: "180px", width: "300px", display: "block"}} className="image" className={classes.imgCardTop} src={Service}/>
                  <div className="middle">
                    <div className="text">Service</div>
                  </div>
                </div>
              </Card>
              <div align="center">
                <Button color="info" round href="https://booking.thamrin.co.id/" target="_blank">
                    <Icon className={classes.icons}>open_in_new</Icon>View More Service
                </Button>
              </div>
            </Grid>
            <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
              <Card style={{width: "20rem"}}>
                <div align="center" className="container">
                  <img style={{height: "180px", width: "300px", display: "block"}} className="image" className={classes.imgCardTop} src={Sparepart}/>
                  <div className="middle">
                    <div className="text">Sparepart</div>
                  </div>
                </div>
              </Card>
              <div align="center">
                <Button color="info" round href="https://yamaha.thamrin.co.id/" target="_blank">
                    <Icon className={classes.icons}>open_in_new</Icon>View More Sparepart
                </Button>
              </div>
            </Grid>
          </GridContainer>
        </div>
      </div>
    );
}

export default DataService;