"use client";

import { useEffect, useState } from "react";
import { useInView } from "react-intersection-observer";

import { useLanguage } from "@/app/context/LanguageContext";

interface CounterProps {
  end: number;
  suffix?: string;
  decimal?: boolean;
}

function AnimatedCounter({
  end,
  suffix = "",
  decimal = false,
}: CounterProps) {
  const [count, setCount] = useState(0);

  const { ref, inView } = useInView({
    triggerOnce: true,
    threshold: 0.5,
  });

  useEffect(() => {
    if (!inView) return;

    let current = 0;
    const increment = end / 120;

    const updateCounter = () => {
      current += increment;

      if (current >= end) {
        setCount(end);
      } else {
        setCount(current);
        requestAnimationFrame(updateCounter);
      }
    };

    updateCounter();
  }, [inView, end]);

  return (
    <span ref={ref}>
      {decimal ? count.toFixed(1) : Math.floor(count)}
      {suffix}
    </span>
  );
}

export default function CounterStrip() {
  const { t } = useLanguage();

  return (
    <section className="counter-strip">
      <div className="container">
        <div className="row justify-content-center text-center">

          <div className="col-lg-3 col-md-6 col-6">
            <div className="counter-item">
              <div className="counter-title">
                <AnimatedCounter
                  end={120.2}
                  decimal
                  suffix="M+"
                />
              </div>

              <p>{t("home.counterStrip.totalCustomers", "Total Customers")}</p>
            </div>
          </div>

          <div className="col-lg-3 col-md-6 col-6">
            <div className="counter-item">
              <div className="counter-title">
                <AnimatedCounter
                  end={48726}
                  suffix="+"
                />
              </div>

              <p>{t("home.counterStrip.totalAstrologers", "Total Astrologers")}</p>
            </div>
          </div>

          <div className="col-lg-3 col-md-6 col-6 mt-4 mt-lg-0">
            <div className="counter-item">
              <div className="counter-title">
                <AnimatedCounter
                  end={4.7}
                  decimal
                  suffix="★"
                />
              </div>

              <p>{t("home.counterStrip.averageRating", "Average Rating")}</p>
            </div>
          </div>

          <div className="col-lg-3 col-md-6 col-6 mt-4 mt-lg-0">
            <div className="counter-item">
              <div className="counter-title">
                <AnimatedCounter
                  end={1326}
                  suffix="M+"
                />
              </div>

              <p>{t("home.counterStrip.chatCallMinutes", "Chat/Call Minutes")}</p>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}