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 CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";

import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js";
import { cardTitle } from "assets/jss/nextjs-material-kit.js";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);

const DataDealer = function ({ backend, dealers, ...props }) {
    const classes = useStyles();
    const Dealer = dealers.map((data) => {
        return (
            <Grid align="center" style={{padding:"30px", marginTop:"-50px"}}>
                <Card style={{width: "20rem"}}>
                    <img
                    style={{height: "180px", width: "100%", display: "block"}}
                    className={classes.imgCardTop}
                    src={`${backend}${data.img["url"]}`}
                    />
                    <CardBody>
                    <p>{data.name}</p>
                    <p>{data.kota_dealer}</p>
                    <p>{data.telp}</p>
                    <p>{data.address}</p>
                    <div align="center">
                        <Button color="info" round href={data.location} target="_blank">
                            <Icon className={classes.icons}>room</Icon>View Location
                        </Button>
                    </div>
                    </CardBody>
                </Card>
            </Grid>
        );
    })
    return (
    <div>
        <div align="center">
            <div style={{padding:"20px", marginTop:"-70px"}} align="center" className={classes.section} id="notifications">
                <SnackbarContent
                align="center"
                color="info"
                message="Thamrin Brothers - Yamaha Dealer"
                />
            </div>
        </div>
        <Grid container style={{padding: "40px", marginTop:"-50px"}} justify="center">
            {Dealer}
            <div align="center">
                <Button color="info" round href="/yamaha/dealers" target="_blank">
                    <Icon className={classes.icons}>open_in_new</Icon>View More Dealers
                </Button>
            </div>
        </Grid>
    </div>
    );
}

export default DataDealer;