<template>
  <div class="gallery-grid">
    <div class="grid">
      <div
        class="grid-item"
        v-for="(image) in images"
        :key="image.name"
        @click="$emit('imageTapped', image, $event)"
      >
        <img :src="image.path" :alt="'Image ' + image.name" />
        <div v-if="image.is_new" class="new-badge">{{ __('new') }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  images: {
    type: Array,
    required: true,
  },
  translations: {
    type: Object,
    required: true,
  },
});

const emits = defineEmits(['imageTapped']);

const __ = (key) => {
  return props.translations[key] || key;
};
</script>

<style scoped>
.gallery-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
  gap: 20px; /* Zwischenabstand */
  width: 100%;
  max-width: 1200px; /* Beispiel: Maximale Breite des Rasters */
}

.grid-item {
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative; /* Added for badge positioning */
}

.grid-item img {
  width: 100%;
  height: 200px; /* Feste Höhe für die Bilder im Raster */
  object-fit: cover; /* Bilder zuschneiden, um den Bereich zu füllen */
  display: block;
}

.new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: red;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8em;
  font-weight: bold;
  z-index: 10;
}
</style>