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

export default function TechStack({ value }: { value: TechStackBlockValue }) {
  return (
    <section className="bg-slate-50 py-24">
      <div className="mx-auto max-w-6xl px-6">
        {value.heading && (
          <h2 className="mb-16 text-center text-4xl font-bold text-slate-900">
            {value.heading}
          </h2>
        )}
        <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
          {value.items?.map((item, index) => (
            <div
              key={`${item.label}-${index}`}
              className="flex flex-col items-center gap-3 rounded-2xl bg-white p-6 text-center shadow-sm"
            >
              {item.icon && <span className="text-3xl">{item.icon}</span>}
              <span className="text-sm font-medium text-slate-700">
                {item.label}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}