'use client';

import { Container } from '@/shared/components/container';
import { useIntersectionObserver } from '@/shared/hooks/use-intersection-observer';
import { useTextController } from '@/shared/language/hooks/use-text-controller';

import AnimatedCounter from '../shared/components/animated-counter';

const stats = [
  {
    key: 'stations',
    value: 'home.stats.stations.value',
    suffix: 'home.stats.stations.suffix',
    label: 'home.stats.stations',
  },
  {
    key: 'daily',
    value: 'home.stats.daily.value',
    suffix: 'home.stats.daily.suffix',
    label: 'home.stats.daily',
  },
  {
    key: 'years',
    value: 'home.stats.years.value',
    suffix: '',
    label: 'home.stats.years',
  },
  {
    key: 'mode',
    value: 'home.stats.mode.value',
    suffix: 'home.stats.mode.suffix',
    label: 'home.stats.mode',
  },
];

export function StatsSection() {
  const { t } = useTextController();
  const { sectionRef, isVisible } = useIntersectionObserver<HTMLDivElement>();

  const toNumber = (value: string) => Number(t(value));

  return (
    <section ref={sectionRef} className='bg-red-600 text-white'>
      <Container>
        <div className='grid grid-cols-2 gap-4 text-center sm:gap-8 md:grid-cols-4'>
          {stats.map(({ key, value, suffix, label }) => (
            <div key={key} className='space-y-2'>
              <h3 className='text-3xl font-bold'>
                {isVisible ? (
                  <AnimatedCounter
                    end={toNumber(value)}
                    suffix={t(suffix) || undefined}
                  />
                ) : (
                  `0${t(suffix) || ''}`
                )}
              </h3>
              <p className='text-sm text-white/80'>{t(label)}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}
