import type { StoreSiteBlock } from "@alqove/api-client";
import { blockData, list, safeImageUrl, str } from "../block-data";
import { SectionHeading, StorefrontSection } from "../section";

interface GalleryImage {
  url?: string;
  alt?: string;
}

export function GalleryBlock({ block }: { block: StoreSiteBlock }) {
  const data = blockData(block);
  const heading = str(data, "heading");

  const images = list<GalleryImage>(data, "images")
    .map((image) => ({
      url: safeImageUrl(image?.url ?? null),
      alt: typeof image?.alt === "string" ? image.alt : "",
    }))
    .filter((image): image is { url: string; alt: string } => image.url !== null);

  if (images.length === 0) return null;

  return (
    <StorefrontSection>
      {heading && <SectionHeading>{heading}</SectionHeading>}
      <ul className="grid grid-cols-2 gap-4 sm:grid-cols-3">
        {images.map((image, i) => (
          <li
            key={`${image.url}-${i}`}
            className="aspect-square overflow-hidden"
            style={{
              backgroundColor: "var(--sf-surface)",
              borderRadius: "var(--sf-radius)",
            }}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={image.url}
              alt={image.alt}
              loading="lazy"
              className="h-full w-full object-cover"
            />
          </li>
        ))}
      </ul>
    </StorefrontSection>
  );
}