import type { StatsBlockValue } from "@/types/wagtail";

export default function Stats({ value }: { value: StatsBlockValue }) {
  return (
    <section className="py-20">
      <div className="mx-auto grid max-w-6xl grid-cols-2 gap-8 px-6 lg:grid-cols-4">
        {value.items?.map((item, index) => (
          <div
            key={`${item.label}-${index}`}
            className="rounded-3xl border border-slate-100 bg-white p-10 text-center shadow-sm"
          >
            <div className="mb-3 text-5xl font-bold text-primary">{item.value}</div>
            <div className="text-slate-600">{item.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}