import Image from "next/image";

type AwardImageNode = {
  sourceUrl: string;
  altText?: string | null;
};

type AwardImage = {
  node?: AwardImageNode | null;
};

type AwardsImages = {
  image1?: AwardImage | null;
  image2?: AwardImage | null;
  image3?: AwardImage | null;
  image4?: AwardImage | null;
  image5?: AwardImage | null;
};

type AwardsProps = {
  data: {
    awardsTitle: string;
    awardsSubtitle: string;
    awardsImages?: AwardsImages | null;
  };
};

export default function Awards({ data }: AwardsProps) {
  const images = Object.values(data.awardsImages || {}).filter(
    (img): img is AwardImage =>
      Boolean(img?.node?.sourceUrl)
  );

  return (
    <section className="py-12 md:py-24 bg-white">
      <div className="container mx-auto px-4 text-center">
        <span className="text-lg font-medium text-[#202020]/50 block mb-2">
          {data.awardsSubtitle}
        </span>

        <h2 className="max-w-3xl mx-auto text-xl md:text-2xl text-[#202020] font-mono">
          {data.awardsTitle}
        </h2>

        {/* Awards */}
        <div className="mt-12 flex justify-center items-center gap-4 sm:gap-10">
          {images.map((img, i) => (
            <div
              key={i}
              className="opacity-70 hover:opacity-100 transition cursor-pointer"
            >
              <Image
                src={img.node!.sourceUrl}
                alt={img.node!.altText || "Award recognition"}
                width={120}
                height={120}
                unoptimized
                className="object-contain grayscale hover:grayscale-0 transition"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}