<template>
  <div class="fc-post-grid">
    <button
      v-for="(t, idx) in thumbnails"
      :key="t.image_id"
      type="button"
      class="fc-post-grid__cell"
      :aria-label="`Open image ${idx + 1} of ${thumbnails.length}`"
      @click="openImage(t.image_id, idx)"
    >
      <img
        :src="t.thumbnail_url"
        :alt="`thumbnail ${idx + 1}`"
        loading="lazy"
      />
    </button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useModalStore } from '../../stores/modal.js'

const props = defineProps({
  thumbnails: { type: Array, required: true },  // [{ image_id, thumbnail_url, ... }]
})

const modal = useModalStore()

const imageIds = computed(() => props.thumbnails.map(t => t.image_id))

function openImage (id, idx) {
  modal.open(id, { postImageIds: imageIds.value, initialIndex: idx })
}
</script>

<style scoped>
.fc-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.fc-post-grid__cell {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: rgb(var(--v-theme-background));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fc-post-grid__cell:hover {
  transform: scale(1.02);
  box-shadow: 0 0 0 2px rgb(var(--v-theme-accent));
}
.fc-post-grid__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
</style>
