import React from 'react';
import Link from 'next/link';
import * as Icon from 'react-feather';

import { FaWhatsapp } from "react-icons/fa";
import { FaRegEnvelope } from "react-icons/fa";
import { FaPhoneAlt } from "react-icons/fa";

const Sales = function ({ backend, sales, ...props }) {

    const DataSales = sales.map((data) => {
        return (
            <div>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

                <div class="jumbotron" style={{ backgroundColor: "#000", marginLeft: "-15px", marginRight: "-15px" }}>
                    <div className="col-lg-3 col-md-6">
                        <div className="single-team" style={{ backgroundColor: "#000" }}>
                            <img src="/images/Sales/Logo Star.png" width="200px" alt="image" style={{ marginTop: "-30px" }} />

                            <div className="team-content">
                                <h1 style={{ color: "#fff" }}>{data.name}</h1>
                                <p style={{ color: "#fff" }}><strong>{data.job_title}</strong></p>
                                <br />
                            </div>
                        </div>
                    </div>
                    <div align="center" style={{ marginTop: "-30px" }}>
                        <Link href={`tel:${data.telp}`}>
                            <a style={{ padding: "20px" }} className="btn btn-primary"><FaPhoneAlt /> Call Us</a>
                        </Link>
                        <Link href={`mailto:${data.email}`}>
                            <a style={{ padding: "20px" }} className="btn btn-primary"><FaRegEnvelope /> Email Us</a>
                        </Link>
                        <Link href={`https://wa.me/62${data.wa}`}>
                            <a style={{ padding: "20px" }} className="btn btn-primary"><FaWhatsapp /> WA Us</a>
                        </Link>
                    </div><br />
                </div>

                <div class="table-responsive" align="left">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>
                                    <Link href="#">
                                        <a target="_blank"><Icon.Phone style={{ marginTop: "-20px", marginLeft: "15px" }} /></a>
                                    </Link>
                                </th>
                                <th>{data.telp} <br /> Mobile </th>
                            </tr>
                            <tr>
                                <th>
                                    <Link href="#">
                                        <a target="_blank"><Icon.Mail style={{ marginTop: "-20px", marginLeft: "15px" }} /></a>
                                    </Link>
                                </th>
                                <th>{data.email} <br /> Email </th>
                            </tr>
                            <tr>
                                <th>
                                    <Link href="#">
                                        <a target="_blank"><Icon.ShoppingBag style={{ marginTop: "-20px", marginLeft: "15px" }} /></a>
                                    </Link>
                                </th>
                                <th>{data.company} <br /> {data.job_title} </th>
                            </tr>
                            <tr>
                                <th>
                                    <Link href="#">
                                        <a target="_blank"><Icon.Globe style={{ marginTop: "-20px", marginLeft: "15px" }} /><br /></a>
                                    </Link>
                                </th>
                                <th>thamrin.mercedes-benz.co.id<br /> Website </th>
                            </tr>
                        </thead>
                    </table>
                </div>

            </div>
        )
    })
    return (
        <div className="container">
            <div className="row justify-content-center">
                {DataSales}
            </div>
        </div>
    )
}

export default Sales;