'use client';

import { useEffect, useRef, useState } from 'react';

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

export function StatsSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      {
        threshold: 0.1,
      },
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <section ref={sectionRef} className='bg-red-600 py-12 text-white'>
      <div className='container mx-auto'>
        <div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
          <div className='space-y-2'>
            <h3 className='text-3xl font-bold'>
              {isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}
            </h3>
            <p className='text-sm text-white/80'>Заправок по стране</p>
          </div>
          <div className='space-y-2'>
            <h3 className='text-3xl font-bold'>
              {isVisible ? <AnimatedCounter end={10000} suffix='+' /> : '0+'}
            </h3>
            <p className='text-sm text-white/80'>Клиентов ежедневно</p>
          </div>
          <div className='space-y-2'>
            <h3 className='text-3xl font-bold'>
              {isVisible ? <AnimatedCounter end={15} /> : '0'}
            </h3>
            <p className='text-sm text-white/80'>Лет на рынке</p>
          </div>
          <div className='space-y-2'>
            <h3 className='text-3xl font-bold'>
              {isVisible ? <AnimatedCounter end={24} suffix='/7' /> : '0/7'}
            </h3>
            <p className='text-sm text-white/80'>Работаем круглосуточно</p>
          </div>
        </div>
      </div>
    </section>
  );
}