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

const Dealers = function ({ title,backend, dealers, ...props }) {
    const ListDealer = (dealers)?dealers.map((data,idx) => {
        try{
            if(data.attributes.Gmap && data.attributes.Gmap[0]=='<'){
                var span = document.createElement('span');
                span.innerHTML = data.attributes.Gmap;
                data.attributes.Gmap = span.textContent || span.innerText;
            }
        }
        catch(e){
            
        }
        return (
            <div key={idx} className="col-lg-4 col-sm-6 col-md-6">
                <div className="agency-services-box">
                    <img style={{ height: "250px", width: "100%", display: "block" }} src={(data.attributes.Image.data)?`/api/util?img=${encodeURIComponent(data.attributes.Image.data.attributes.url)}`:"/images/blog-image/blog-details.jpg"} alt="image" />

                    <div className="content">
                        <p>
                            <p><b>{data.attributes.Name} - {data.attributes.Kota}</b></p>
                            <p><b>{data.attributes.Telp}</b></p>
                            <p><b>{data.attributes.Address}</b></p>
                        </p>

                        <Link href={`${data.attributes.Gmap}`} target="_blank">
                            <a className="read-more-btn" target="_blank">
                                View Location <Icon.MapPin />
                            </a>
                        </Link>
                    </div>
                </div>
            </div>
        );
    }):"";
    return (
        <div>
            <div className="agency-services-area pt-50 pb-50">
                <div className="container">
                    <div className="section-title st-fs-28">
                        <h2>{title}</h2>
                    </div>

                    <div className="row justify-content">
                        {ListDealer||<div className="bar"></div>}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Dealers;