import Link from "next/link";
import Image from "next/image";
import type { ProductCardBlockValue } from "@/types/wagtail";

export default function ProductCardGrid({ value }: { value: ProductCardBlockValue }) {
  return (
    <section className="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 sm:grid-cols-2 lg:grid-cols-3">
          {value.items?.map((item, index) => {
            const card = (
              <div className="h-full rounded-3xl border border-slate-100 p-6 shadow-sm transition hover:shadow-md">
                {item.image && (
                  <Image
                    src={item.image.url}
                    alt={item.image.title}
                    width={400}
                    height={240}
                    className="mb-6 h-40 w-full rounded-2xl object-cover"
                  />
                )}
                <h3 className="mb-2 text-xl font-semibold text-slate-900">
                  {item.title}
                </h3>
                {item.description && (
                  <p className="text-slate-600">{item.description}</p>
                )}
              </div>
            );
            const key = `${item.title}-${index}`;
            return item.link ? (
              <Link key={key} href={item.link} className="block h-full">
                {card}
              </Link>
            ) : (
              <div key={key}>{card}</div>
            );
          })}
        </div>
      </div>
    </section>
  );
}