<script setup>
import {ref} from 'vue'

const currentImage = ref(0)

const props = defineProps({
    images: Array,
    timeout: {type: Number, default: 5000},
    pauseOnHover: Boolean,
})

setInterval(function () {
    currentImage.value = currentImage.value + 1 >= props.images.length ? 0 : currentImage.value + 1;
}, props.timeout);


</script>
<template>
    <div class="relative max-w-full max-h-[480px] rounded-lg overflow-hidden w-full h-full select-none">
        <transition
            enter-active-class="transition-opacity duration-700 ease-in-out"
            enter-from-class="transform opacity-0"
            enter-to-class="opacity-100 scale-100"
            leave-active-class="transition-opacity duration-700 ease-in-out"
            leave-from-class="opacity-100 scale-100"
            leave-to-class="transform opacity-0"
        >
            <img :key="currentImage"
                 :src="images[currentImage]"
                 :style="'z-index: ' + (currentImage + 1)"
                 alt=""
                 class="inset-0 object-cover absolute w-full h-full"
            />
        </transition>
    </div>
</template>
