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

import classNames from "classnames";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Grid from '@material-ui/core/Grid';
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Button from "components/CustomButtons/Button.js";
import Paginations from "components/Pagination/Pagination.js";
import Icon from "@material-ui/core/Icon";

import profile from "assets/img/faces/christian.jpg";
import QR from "assets/img/sales/qr_steven.jpg";

import Email from "@material-ui/icons/Email";
import Phone from "@material-ui/icons/Phone";
import Wa from "@material-ui/icons/WhatsApp";

const useStyles = makeStyles(styles);

const DataLatestNews = function ({ backend, sales, ...props }) {
    const classes = useStyles();
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const DataSales = sales.map((data) => {
        return (
            <div className={classes.container}>
                <GridContainer justify="center">
                    <GridItem xs={12} sm={12} md={6}>
                        <div className={classes.profile}>
                            <div>
                                <img
                                    src={`${backend}${data.foto["url"]}`}
                                    alt="..."
                                    className={imageClasses}
                                />
                            </div>
                            <div className={classes.name}>
                                <div><h1><strong>{data.name}</strong></h1></div>
                                <div><h4><strong>{data.job_title}</strong></h4></div>
                                <div align="center">
                                    <h5><strong>{data.company}</strong></h5>
                                </div>
                            </div>
                            <Button color="primary" round href="tel:087797315685" target="_blank">
                                <Phone className={classes.icons} /> Call Us
                            </Button>
                            <Button color="primary" round href="mailto:yyusmar2@gmail.com" target="_blank">
                                <Email className={classes.icons} /> Email Us
                            </Button>
                            <Button color="primary" round href="mailto:yyusmar2@gmail.com" target="_blank">
                                <Wa className={classes.icons} /> Message Us
                            </Button>
                        </div>
                    </GridItem>
                </GridContainer><br /><br />
            </div>
        );
    })
    return (
        <div>
            {DataSales}
        </div>
    );
}

export default DataLatestNews;