import { memo } from 'react';
import { withTranslation } from 'react-i18next';
import StatisticsCard from './StatisticsCard';

function Statistics({ t }) {
  return (
    <section className="flex flex-col items-center">
      <div className="flex gap-20 mb-[136px]">
        <StatisticsCard title={t('stat_title_1')} text={t('stat_text_1')} />
        <StatisticsCard title={t('stat_title_2')} text={t('stat_text_2')} />
        <StatisticsCard title={t('stat_title_3')} text={t('stat_text_3')} />
      </div>
      <h2 className="max-w-[1020px] mb-4 text-5xl text-center">{t('caption')}</h2>
    </section>
  );
}

export default withTranslation('homePage')(memo(Statistics));