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

const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/*");
const imagePaths = Object.keys(images).filter((imagePath) => {
  return imagePath.startsWith(`/src/assets/`);
});
---

<div id="main">
  {
    imagePaths.map(async (imagePath) => {
      const image = images[imagePath]()
      const optimizedImage = await getImage({
        src: image,
        width: 1200,
      })

      return (
        <article class="thumb">
          <a class="image" href={optimizedImage.src}>
            <Image src={image} height="750" alt="Astro Multiverse" />
          </a>
        </article>
      )
    })
  }
</div>
