"use client";
import { Counter } from "@/components/Counter";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";

interface Statistics {
  id: number;
  number: number;
  hint: string;
  description: string;
}

export function Statistics() {
  const t = useTranslations();
  const stats = [
    {
      id: 1,
      number: 25,
      hint: "+",
      description: t("home.statistics.experience"),
    },
    {
      id: 2,
      number: 450,
      hint: "+",
      description: t("home.statistics.projectsCompleted"),
    },
    {
      id: 3,
      number: 99,
      hint: "+",
      description: t("home.statistics.trainedSpecialists"),
    },
    {
      id: 4,
      number: 93,
      hint: "%",
      description: t("home.statistics.trustedClients"),
    },
  ];
  const [stat, setStat] = useState<Statistics[]>(stats);

  const { data } = useQuery({
    queryKey: ["statistics"],
    queryFn: () => httpClient(endPoints.statistics),
    select: (data) => data?.data?.results,
  });

  useEffect(() => {
    data && setStat(data);
  }, [data]);

  return (
    <section className="w-full bg-black">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
          {stat.map((stat, index) => (
            <div
              key={index}
              className="flex flex-col items-center justify-center py-10 sm:py-20 lg:py-15 border-b-red-600 border-b"
            >
              {/* Number and Symbol */}
              <div className="flex items-baseline gap-2 font-almarai">
                <span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white">
                  <Counter countNum={Number(stat.number)} />
                </span>
                <span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-red-600">
                  {stat.hint}
                </span>
              </div>

              {/* Label */}
              <p className="font-almarai text-sm sm:text-base text-gray-300 mt-4 text-center font-medium">
                {stat.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}