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

const carousel = useTemplateRef('carouselGallery');

onMounted(() => {
  setInterval(() => {
    if (!carousel.value) return;

    if (carousel.value.page === carousel.value.pages) {
      return carousel.value.select(0);
    }

    carousel.value.next();
  }, 5000);
});
</script>

<template>
  <UCarousel
    ref="carouselGallery"
    v-slot="{ item }"
    :items="props.images"
    :ui="{
      item: 'basis-full',
      indicators: { wrapper: 'bg-black/70 w-min px-2.5 py-1.5 gap-1 left-4 rounded-xl' },
    }"
    class="overflow-hidden"
    indicators
  >
    <img :src="item" class="w-full" draggable="true" />
  </UCarousel>
</template>