import React, { useState } from 'react'
import { StaticImage } from 'gatsby-plugin-image';

import Title from '../UI/Title';
import Count from './Count';

const Counts = () => {
    const [counts] = useState([
        {id: 0, number: '10', text: 'Лет работы'},
        {id: 1, number: '100', text: 'Успешных партнеров '},
        {id: 2, number: '100 000', text: 'Проведенных операций'},
        {id: 3, number: '>30%', text: 'Сокращение затрат'},
    ])

    return (
        <section className='bg-[#F7F7FF] py-[90px] max-md:py-9 max-sm:px-3 max-md:px-6'>
            <div className="container mx-auto">
                <Title className='mb-[70px] max-md:mb-8' titleClass='max-w-[570px]' subtitle='Впечатляющие результаты, доверие клиентов и финансовая эффективность!'>Наши цифры говорят сами за себя</Title>
                <div className="flex max-lg:flex-col justify-between items-center">
                    <div className="flex flex-wrap [&>*:nth-last-child(2)]:mb-0 [&>*:nth-last-child(1)]:mb-0 mr-32 max-lg:mr-0 max-lg:mb-8">
                        {counts.map(count=>
                            <Count key={count.id} number={count.number} text={count.text}/>
                        )}
                    </div>
                    <StaticImage src='../../images/count.jpg' alt='count-image' className='rounded-[30px] max-md:rounded-[20px] max-w-[670px] lg:max-xl:max-w-[500px] max-h-[456px]' placeholder='blurred'/>
                </div>
            </div>
        </section>
    )
}

export default Counts;