<template>
  <div class="flex flex-col items-center justify-center h-full">
    <div class="relative w-full flex-1 flex items-center justify-center min-h-0 p-4">
      <!-- Previous button -->
      <button 
        v-if="gallery.length > 1"
        @click="prev" 
        class="absolute left-2 z-10 p-2 bg-gray-600 rounded-full text-white hover:bg-gray-700"
      >
        <Icon name="mdi:chevron-left" class="w-6 h-6" />
      </button>

      <!-- Image -->
      <NuxtImg 
        v-if="gallery[currentIndex]"
        :src="'/' + bucket + '/' + gallery[currentIndex].image" 
        class="max-w-full max-h-[60vh] object-contain"
      />

      <!-- Next button -->
      <button 
        v-if="gallery.length > 1"
        @click="next" 
        class="absolute right-2 z-10 p-2 bg-gray-600 rounded-full text-white hover:bg-gray-700"
      >
        <Icon name="mdi:chevron-right" class="w-6 h-6" />
      </button>
    </div>

    <!-- Dots indicator -->
    <div v-if="gallery.length > 1" class="flex gap-2 py-2">
      <button 
        v-for="(img, index) in gallery" 
        :key="index"
        @click="currentIndex = index"
        class="w-2 h-2 rounded-full transition-colors"
        :class="index === currentIndex ? 'bg-gray-600' : 'bg-gray-300'"
      />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  bucket: String,
  gallery: Array,
  initialIndex: {
    type: Number,
    default: 0
  }
})

const currentIndex = ref(props.initialIndex)

const next = () => {
  currentIndex.value = (currentIndex.value + 1) % props.gallery.length
}

const prev = () => {
  currentIndex.value = (currentIndex.value - 1 + props.gallery.length) % props.gallery.length
}
</script>
