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 Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Quote from "components/Typography/Quote.js"
import Icon from "@material-ui/core/Icon";
import Button from "components/CustomButtons/Button.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 Dealers = dealers.map((data) => {
        return (
        <Grid style={{width:"400px", padding:"30px"}}>
            <Card>
                <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
                <CardBody>
                    <Quote
                    text={data.kota_dealer}
                    author={data.address}
                    />
                    <Quote
                    text={data.telp}
                    author={data.email}
                    />
                    <div align="center">
                        <Button color="danger" round href={data.location} target="_blank">
                            <Icon className={classes.icons}>room</Icon>View Location
                        </Button>
                    </div>
                </CardBody>
            </Card>
        </Grid>
        );
        })
        return (
        <div className={classes.section} id="notifications">
            <div align="center">

                <h2>Dealers & Service</h2>
            </div>
            <div>
            <GridContainer justify="center">
                {Dealers}
            </GridContainer>
            </div>
        </div>
    );
}

export default DataDealer;