import React, { Component } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Icon from "@material-ui/core/Icon";
import Grid from '@material-ui/core/Grid';

import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
import Card from "components/Card/Card.js";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js";
import { cardTitle } from "assets/jss/nextjs-material-kit.js";

import fb from "assets/img/sosmed/fb.jpg";
import ig from "assets/img/sosmed/ig.png";
import twt from "assets/img/sosmed/twt.png";
import yt from "assets/img/sosmed/yt.jpg";

const styles = {
    ...imagesStyles,
    cardTitle,
};

const useStyles = makeStyles(styles);
const DataService = function ({ backend, service, ...props })  {
    const classes = useStyles();
    return (
        <div className={classes.section} id="notifications">
            <div align="center" className={classes.section} id="notifications">
                <SnackbarContent
                message={
                    <h4>Follow Us On</h4>
                }
                align="center"
                color="danger"
                />
            </div>
            <div align="center">
            <GridContainer justify="center">
                <Grid style={{padding:"25px"}}>
                    <Card>
                        <img className={classes.imgCard} src={fb} alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
                        <div className={classes.imgCardOverlay}>
                            <div align="center" style={{marginTop:"120px"}}>
                            <Button color="white" href="https://www.facebook.com/yamaholigan" target="_blank">
                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
                            </Button>
                            </div>
                        </div>
                    </Card>
                </Grid>
                <Grid style={{padding:"25px"}}>
                    <Card>
                        <img className={classes.imgCard} src={yt} alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
                        <div className={classes.imgCardOverlay}>
                            <div align="center" style={{marginTop:"120px"}}>
                            <Button color="white" href="https://www.youtube.com/user/yamahamotorindonesia" target="_blank">
                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
                            </Button>
                            </div>
                        </div>
                    </Card>
                </Grid>
                <Grid style={{padding:"25px"}}>
                    <Card>
                        <img className={classes.imgCard} src={ig} alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
                        <div className={classes.imgCardOverlay}>
                            <div align="center" style={{marginTop:"120px"}}>
                            <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank">
                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
                            </Button>
                            </div>
                        </div>
                    </Card>
                </Grid>
            </GridContainer>
            <GridContainer justify="center">
                <Grid style={{padding:"25px", marginTop:"-50px"}}>
                    <Card>
                        <img className={classes.imgCard} src={twt} alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
                        <div className={classes.imgCardOverlay}>
                            <div align="center" style={{marginTop:"120px"}}>
                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
                            </Button>
                            </div>
                        </div>
                    </Card>
                </Grid>
            </GridContainer>
            </div>
        </div>
    );
}

export default DataService;