import { useTranslations } from "next-intl";

export function Stats() {
  const t = useTranslations("stats");

  const items = [
    { value: t("cafes"), label: t("cafesLabel") },
    { value: t("orders"), label: t("ordersLabel") },
    { value: t("satisfaction"), label: t("satisfactionLabel") },
    { value: t("uptime"), label: t("uptimeLabel") },
  ];

  return (
    <section className="border-y border-gray-100 bg-gray-50/60 py-10">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 gap-y-8 md:grid-cols-4">
          {items.map((item, i) => (
            <div
              key={i}
              className="flex flex-col items-center gap-1 text-center"
            >
              <span className="text-3xl font-extrabold text-brand-700 sm:text-4xl">
                {item.value}
              </span>
              <span className="text-sm text-gray-500">{item.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
