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

const OurServices = ({companies}) => {
    const partners = companies.map((data, index) => {
		return (
            <div className="col-lg-4 col-md-6" key={index}>
                <div className='single-repair-services'
                style={{
                    'objectFit':'fill',
                    width:'390px',
                    height:'340px',
                    'backgroundImage' : (data.attributes.Background.data)?`url('/api/util?img=${encodeURIComponent(data.attributes.Background.data.attributes.url)}')`:''}}
                >
                    <img style={{
                        'maxWidth': '290px',
                        'maxHeight': '100px',
                    }} src={`/api/util?img=${encodeURIComponent(data.attributes.Icon.data.attributes.url)}`} alt="image" />
                    <br/>
                    <h3 style={{    position: 'absolute',
                        left: '0%',
                        top: '60%',
                        width:'100%'
                    }}
                    >{data.attributes.Business_name}<br /> {data.attributes.Name}</h3>
                    <br/><br/><br/>
                    <Link href={(data.attributes.Website)?data.attributes.Website:`/${data.attributes.Name.toLowerCase()}`} target="_blank">
                        <a style={{
                            position:'absolute',
                            top: '84%',
                            left: '45%'
                        }}target="_blank"><Icon.ArrowRight /></a>
                    </Link>
                </div>
            </div>
		);
	}); 
    return (
        <div id="business_partner" className="iot-services-area pt-80 pb-50">
            <div className="container justify-content-center">
                <div className="section-title">
                    <h2>Thamrin Group Businees Partner</h2>
                    <div className="bar"></div>
                    <p>Thamrin Group mempunyai beberapa Businees Partner sebagai Unit Bisnis nya, antar lain</p>
                </div>
                
                <div className="row">
                    {partners}
                </div>
            </div>
        </div>
    );
}

export default OurServices;