---
import Layout from "../layouts/Layout.astro";

type Picture = {
  src: string;
  alt: string;
  class?: string;
}

  const pictures: Picture[] = [];
  const classes = ["wide", "tall", "big", ""];
  for (let i = 0; i < 10; i++) {
    pictures.push({
      src: `https://picsum.photos/500/500?random=${i}`,
      alt: "random image",
      class: classes[Math.floor(Math.random() * classes.length)],
    });
  }
---

    <Layout title="Galeries">
      <div class="container mx-auto p-8">
        <div class="flex flex-col gap-6">
          <div class="heading flex flex-col items-center gap-2">
            <h1 class="text-4xl font-bold">Retrouvez toutes nos photos</h1>
            <div class="separator w-1/2 border-b-2 border-slate-800"></div>
          </div>
          <div class="grid-wrapper">
            {pictures?.map((picture: Picture) => (
              <div key={picture.src} class={picture.class}>
                <img
                  src={picture.src}
                  alt={picture.alt}
                  width={500}
                  height={500}
                  key={picture.src}
                  class="img"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </Layout>
<style>
img.img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}
</style>
