import React from 'react'
import { DistributorArray, DistributorArray2 } from '../../data/Distributor'
import DistributorWord from '../Ui/DistributorWord'
import AnimationButton from '../Ui/AnimationButton'

const Distributor = () => {
    const {t} = useTranslation() 
  return (
    <div className='Distributor'>
        <div className="left">
            <h1>{t("Our Distributors")}</h1>
            <h4>{t("Look at our local distributors")}</h4>
            <div className='word_container'>
                <div>
                    {DistributorArray.map((e) =>(
                        <DistributorWord title={e.title}/>
                    ))}
                </div>
               <div>
                {DistributorArray2.map((e) =>(
                        <DistributorWord title={e.title}/>
                    ))}
               </div>
            </div>
            <div className="button_container">
                <AnimationButton withAnimation={false} link='/' text='See Details'/>
            </div>
        </div>

        <div className="right">
            <img src="/Home/Gmap.png" alt="googleMap" />
        </div>
    </div>
  )
}

export default Distributor