import Image from "next/image";
import type { LogoCloudBlockValue } from "@/types/wagtail";

export default function LogoCloud({ value }: { value: LogoCloudBlockValue }) {
  return (
    <section className="py-20">
      <div className="mx-auto max-w-6xl px-6 text-center">
        {value.heading && (
          <h3 className="mb-10 text-lg font-semibold text-slate-500">
            {value.heading}
          </h3>
        )}
        <div className="flex flex-wrap items-center justify-center gap-10 grayscale">
          {value.logos?.map((logo, index) => (
            <Image
              key={`${logo.url}-${index}`}
              src={logo.url}
              alt={logo.title}
              width={120}
              height={40}
              className="h-10 w-auto object-contain"
            />
          ))}
        </div>
      </div>
    </section>
  );
}