import React, { Component } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
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";

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

const useStyles = makeStyles(styles);
const DataFeature = 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>Feature Product</h4>
                }
                align="center"
                color="danger"
                />
            </div>
            <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}>
                <Grid>
                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
                        <img className={classes.imgCard} src="https://a.ipricegroup.com/media/0630/2006_sprint12/harga_yamaha_motor.jpg" 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>
                <Grid>
                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
                        <img className={classes.imgCard} src="https://www.akhtarnews.com/wp-content/uploads/2019/03/harga-sparepart-yamaha.jpg" 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>
                <Grid>
                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
                        <div align="center">
                            <img className={classes.imgCard} src="https://2.bp.blogspot.com/-pzpJ-ltEFsA/V6Kh26cBoNI/AAAAAAAAAKY/ZLnJ9v_lDIcKUUNcoVKM8Qw0Izawq08_wCLcB/s1600/yamalube%2B2.jpg" alt="Card-img" style={{height: "200px", width: "300px", display: "block"}}/>
                        </div>
                        {/* <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>
                <Grid>
                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
                        <div align="center">
                            <img className={classes.imgCard} src="https://aomc.mx/mm5/graphics/00000001/X0779100X.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/>
                        </div>
                        {/* <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>
                <Grid>
                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
                        <div align="center">
                            <img className={classes.imgCard} src="https://content.motosport.com/images/items/900/TLD/TLDY0AF/X001.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/>
                        </div>
                        {/* <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>
                <Grid>
                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
                        <div align="center">
                            <img className={classes.imgCard} src="https://static.wixstatic.com/media/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.jpg/v1/fill/w_960,h_429,al_c,q_85/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.webp" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
                        </div>
                        {/* <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>
    );
}

export default DataFeature;