---
import { Image } from "astro:assets";
import type { ImageMetadata } from "astro";

interface Item {
  src: ImageMetadata;
  alt: string;
}

interface Props {
  items: Item[];
}

const { items } = Astro.props as Props;
---

<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
  {
    items.map((item: Item) => (
      <div class="flex-col overflow-hidden rounded-sm">
        {item.src && (
          <a
            href={item.src.src}
            target="_blank"
            class="cursor-zoom-in"
            title="Open image in new tab"
          >
            <Image
              src={item.src}
              alt={item.alt}
              loading="lazy"
              class="mt-0 mb-0 h-full max-h-[90svh] w-full object-cover"
            />
          </a>
        )}
      </div>
    ))
  }
</div>
