"use client";

import { StatisticCardItem } from "../_components/statistic-card-item";
import { useQuery } from "@tanstack/react-query";
import countStatisticApi from "@/shared/services/count";
import { STAT_CARDS } from "../_components/statistic-config";

const formatNumber = (n?: number) =>
  typeof n === "number" ? n.toLocaleString("id-ID") : "-";
export function StatisticCard() {
  const { data, isLoading } = useQuery({
    queryKey: ["count"],
    queryFn: () =>
      countStatisticApi.getCountStatistic({ skipAuth: true }).then((r) => r),
    staleTime: 5000,
  });

  return (
    <div className="@container/hero-statistic container">
      <div className="@container/hero-statistic container px-0 px-4 @3xl/hero-statistic:absolute @3xl/hero-statistic:inset-x-0 @3xl/hero-statistic:-translate-y-1/2">
        <div className="mx-auto grid grid-cols-1 items-center justify-center gap-5 @xl/hero-statistic:grid-cols-2 @6xl/hero-statistic:grid-cols-5">
          {STAT_CARDS.map((cfg) => (
            <StatisticCardItem
              key={cfg.key}
              url={cfg.url}
              icon={cfg.icon}
              title={cfg.title}
              value={formatNumber(data?.[cfg.key])}
              loading={isLoading}
            />
          ))}
        </div>
      </div>
    </div>
  );
}