'use client';

import { Users } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

import AnimatedCounter from './animated-counter';
import { useLanguage } from '../language';

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

  const {t} = useLanguage()

  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 (
    <div ref={sectionRef} className='my-8 grid grid-cols-1 gap-6 text-center'>
      <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
        <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
          <Users className='h-6 w-6 text-red-600' />
        </div>
        <h3 className='text-2xl font-bold text-gray-900'>
          {isVisible ? <AnimatedCounter end={150} suffix='+' /> : '0+'}
        </h3>
        <p className='text-gray-600'>{t("about.stats.items.2.label")}</p>
      </div>
      <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
        <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
          <Users className='h-6 w-6 text-red-600' />
        </div>
        <h3 className='text-2xl font-bold text-gray-900'>
          {isVisible ? <AnimatedCounter end={5} suffix='M+' /> : '0M+'}
        </h3>
        <p className='text-gray-600'>{t("about.stats.items.4.label")}</p>
      </div>
      <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
        <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
          <Users className='h-6 w-6 text-red-600' />
        </div>
        <h3 className='text-2xl font-bold text-gray-900'>
          {isVisible ? (
            <AnimatedCounter end={98} suffix='%' decimals={1} />
          ) : (
            '0%'
          )}
        </h3>
        <p className='text-gray-600'>{t("about.stats.items.5.label")}</p>
      </div>
    </div>
  );
}