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

export default function FeatureGrid({ value }: { value: FeatureGridBlockValue }) {
  return (
    <section className="bg-slate-50 py-24">
      <div className="mx-auto max-w-7xl px-6">
        {value.heading && (
          <h2 className="mb-16 text-4xl font-bold text-slate-900">{value.heading}</h2>
        )}
        <div className="grid gap-8 lg:grid-cols-3">
          {value.items?.map((item, index) => (
            <div
              key={`${item.title}-${index}`}
              className="rounded-3xl bg-white p-8 shadow-sm"
            >
              <h3 className="mb-3 text-2xl font-semibold text-slate-900">
                {item.title}
              </h3>
              <p className="text-slate-600">{item.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}