"use client";

import { funFactData } from "@/data/features/funFactData";
import { useEffect, useRef, useState } from "react";

export default function FunFactSection() {
  const [counters, setCounters] = useState<{ [key: number]: number }>({});
  const [hasAnimated, setHasAnimated] = useState(false);
  const observerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !hasAnimated) {
            setHasAnimated(true);
            animateCounters();
          }
        });
      },
      { threshold: 0.3 },
    );

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

    return () => {
      if (observerRef.current) {
        observer.unobserve(observerRef.current);
      }
    };
  }, [hasAnimated]);

  const animateCounters = () => {
    funFactData.blocks.forEach((block, index) => {
      const duration = 2000; // 2 seconds
      const steps = 60;
      const increment = block.target / steps;
      let current = 0;
      let step = 0;

      const timer = setInterval(() => {
        step++;
        current = Math.min(current + increment, block.target);
        setCounters((prev) => ({ ...prev, [index]: Math.floor(current) }));

        if (step >= steps) {
          clearInterval(timer);
          setCounters((prev) => ({ ...prev, [index]: block.target }));
        }
      }, duration / steps);
    });
  };
  return (
    <div className="funfact-sec space-bottom" ref={observerRef}>
      <div className="carousel-container">
        <div className="row">
          <div className="col-lg-6">
            <div
              className="funfact-card"
              data-aos="fade-right"
              data-aos-duration={900}
              data-aos-delay={200}
            >
              <div className="funfact-img">
                <img
                  src={funFactData.card.image.src}
                  alt={funFactData.card.image.alt}
                />
              </div>
              <div className="funfact-content">
                <h4 className="title">{funFactData.card.title}</h4>
                <p>{funFactData.card.description}</p>
              </div>
            </div>
          </div>
          <div className="col-lg-6">
            <div className="row">
              {funFactData.blocks.map((block, index) => (
                <div key={index} className="col-lg-6 col-md-6 col-sm-6">
                  <div
                    className={`funfact-block ${block.variant || ""}`}
                    data-aos="fade-left"
                    data-aos-duration={900}
                    data-aos-delay={200 + index * 200}
                  >
                    <div className="counter-box">
                      <span className="counter">{counters[index] || 0}</span>
                      {block.suffix}
                    </div>
                    <p>{block.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}