<template>
    <div class="gallery-overlay" @click="$emit('close')">
        <div class="gallery-content" @click.stop>
            <button class="gallery-close" @click="$emit('close')">✕</button>
            <img :src="currentImage" :alt="`Image ${currentIndex + 1}`" class="gallery-image" >
            <button class="gallery-nav prev" @click="prevImage">‹</button>
            <button class="gallery-nav next" @click="nextImage">›</button>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    images: string[]
    initialIndex: number
}>()

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const emit = defineEmits<{
    close: []
}>()

const currentIndex = ref(props.initialIndex)
const currentImage = computed(() => props.images[currentIndex.value])

const nextImage = () => {
    currentIndex.value = (currentIndex.value + 1) % props.images.length
}

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