"use client";

import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { performanceMetrics } from "@/data/why-choose-us";

export function PerformanceMetricsTicker() {
  const t = useTranslations("whyChooseUs");
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isExiting, setIsExiting] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setIsExiting(true);

      setTimeout(() => {
        setCurrentIndex((prev) => (prev + 1) % performanceMetrics.length);
        setIsExiting(false);
      }, 250);
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  const currentMetric = performanceMetrics[currentIndex];

  return (
    <div className="mb-8 px-4 py-3 md:mb-12 md:px-6">
      <div className="flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-8">
        <div className="flex flex-shrink-0 items-center gap-2 text-green-500">
          <div className="h-2 w-2 animate-pulse rounded-xl bg-green-500" />
          <span className="whitespace-nowrap font-medium text-neutral-400 text-xs sm:text-sm">
            {t("livePerformanceMetrics")}
          </span>
        </div>
        <div className="ticker-content relative h-[60px] min-w-[100px] overflow-hidden text-center sm:min-w-[120px]">
          <div
            className={`cubic-bezier(0.25, 0.46, 0.45, 0.94) absolute inset-0 transition-all duration-500 ${
              isExiting
                ? "-translate-y-2 transform opacity-0"
                : "translate-y-0 transform opacity-1"
            }`}
          >
            <span className="font-bold text-2xl text-white">
              {currentMetric.value}
            </span>
            <span className="ml-1 text-neutral-400 text-sm">
              {t(currentMetric.unitKey as Parameters<typeof t>[0])}
            </span>
            <div className="text-neutral-500 text-xs">
              {t(currentMetric.labelKey as Parameters<typeof t>[0])}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}