'use client';

import { Users } from 'lucide-react';

import { useTextController } from '@/shared/language/hooks/use-text-controller';

import { useIntersectionObserver } from '../hooks/use-intersection-observer';
import AnimatedCounter from './animated-counter';

const stats = [
  {
    value: 'about.stats.items.1.value',
    suffix: 'about.stats.items.1.suffix',
    label: 'about.stats.items.1.label',
  },
  {
    value: 'about.stats.items.2.value',
    suffix: 'about.stats.items.2.suffix',
    label: 'about.stats.items.2.label',
  },
  {
    value: 'about.stats.items.3.value',
    suffix: 'about.stats.items.3.suffix',
    label: 'about.stats.items.3.label',
    decimals: 1,
  },
];

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

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

  return (
    <div
      ref={sectionRef}
      className='my-4 grid grid-cols-1 gap-6 text-center md:my-8'
    >
      {stats.map((stat, index) => (
        <div
          key={index}
          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={toNumber(stat.value)}
                suffix={t(stat.suffix)}
                decimals={stat.decimals || 0}
              />
            ) : (
              `0${t(stat.suffix)}`
            )}
          </h3>
          <p className='text-gray-600'>{t(stat.label)}</p>
        </div>
      ))}
    </div>
  );
}
