import React, { useState } from 'react';
import Advantage from './Advantage';
import { AiOutlineFieldTime } from "@react-icons/all-files/ai/AiOutlineFieldTime"; 
import { TbWorld } from "@react-icons/all-files/tb/TbWorld";
import { BsPersonCheck } from "@react-icons/all-files/bs/BsPersonCheck";
import { FaConnectdevelop } from "@react-icons/all-files/fa/FaConnectdevelop";

const Advantages = ({...props}) => {

    const [advantages] = useState([
        {id: 1, icon: <AiOutlineFieldTime size={30} color='#fff'/>, title: 'Опытность', description: 'Более 10 лет опыта'},
        {id: 2, icon: <TbWorld size={28} color='#fff'/>, title: 'Глобальность', description: 'Международная экспертиза'},
        {id: 3, icon: <BsPersonCheck size={28} color='#fff'/>, title: 'Индивидуальность', description: 'Индивидуальный подход к каждому клиенту'},
        {id: 4, icon: <FaConnectdevelop size={28} color='#fff'/>, title: 'Инновации', description: 'Движемся в ногу со временем, используя технологичные решения'}
    ]);

    return (
        <section {...props} className='py-24 max-md:py-14 container mx-auto px-10 max-md:px-3'>
            <div className="flex flex-col items-center mb-20 max-md:mb-10">
                <h2 className='text-3xl max-md:text-2xl mb-6 font-semibold text-slate-800 text-center uppercase'>«Играя мы развиваем ваш бизнес»</h2>
                <p className='text-center text-lg max-md:text-base max-w-2xl text-slate-700'>Мы помогаем воодушевлять, развивать сотрудников с прицелом на плодотворную командную работу и результата для Бизнеса!</p>
            </div>
            <div className="flex max-md:flex-wrap">
                {advantages.map((advantage, index)=>
                    <Advantage initial={{ x: -100, opacity: 0 }} whileInView={{ x: 0, opacity: 1 }} transition={{ delay:index*0.1, duration: 0.5 }} viewport={{ once: true }} className="basis-1/4 max-md:basis-1/2 mr-5 max-md:mr-0 last:mr-0" key={advantage.id} icon={advantage.icon} title={advantage.title} description={advantage.description}></Advantage>
                )}
            </div>
        </section>
    );
}

export default Advantages;
