import React, { useState, useEffect } from 'react';
import CountUp from '../reactbits/TextAnimations/CountUp/CountUp';
import RotatingText from '../reactbits/TextAnimations/RotatingText/RotatingText';
import { getMediaCount, getReviewsCount } from '../../services/pocketbaseService';

const StatsSection = () => {
  const [stats, setStats] = useState({
    mediaCount: 0,
    reviewsCount: 0
  });

  useEffect(() => {
    const fetchStats = async () => {
      try {
        const [mediaCount, reviewsCount] = await Promise.all([
          getMediaCount(),
          getReviewsCount()
        ]);
        
        const mediaCountNum = parseInt(mediaCount) || 0;
        const reviewsCountNum = parseInt(reviewsCount) || 0;
        
        setStats({ 
          mediaCount: mediaCountNum,
          reviewsCount: reviewsCountNum
        });
      } catch (error) {
        console.error('Error fetching stats:', error);
        setStats({ mediaCount: 0, reviewsCount: 0 });
      }
    };

    fetchStats();
  }, []);

  return (
    <section className="py-16">
      <div className="container-custom">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-campfire-light mb-4">
            <div className="flex items-center justify-center gap-2">
              <span>Составляй рецензии на</span>
              <div className="w-32 text-left">
                <RotatingText
                  texts={[
                    "Фильмы",
                    "Сериалы",
                    "Игры",
                    "Аниме"
                  ]}
                  className="inline-block text-campfire-amber drop-shadow-[0_0_8px_rgba(255,51,0,0.6)]"
                  rotationInterval={1500}
                  auto={true}
                  loop={true}
                />
              </div>
            </div>
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl mx-auto">
          <div className="bg-campfire-darker p-6 rounded-lg shadow-lg text-center">
            <h3 className="text-campfire-light text-lg mb-2">Медиа в каталоге</h3>
            <CountUp
              to={stats.mediaCount}
              className="text-4xl font-bold text-campfire-amber"
              duration={2}
              start={0}
            />
          </div>

          <div className="bg-campfire-darker p-6 rounded-lg shadow-lg text-center">
            <h3 className="text-campfire-light text-lg mb-2">Рецензий написано</h3>
            <CountUp
              to={stats.reviewsCount}
              className="text-4xl font-bold text-campfire-amber"
              duration={2}
              start={0}
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default StatsSection;