<script setup lang="ts">
import {ref} from 'vue'
const {t, tm, rt} = useVariantData()
import {useTemplateRef} from '#imports'

interface Props {
  images?: string[]      // ❶  Fragezeichen = optional
}

const props = withDefaults(defineProps<Props>(), {
  images: () => [
    'https://picsum.photos/200/300'
  ]
})

/* ───────── shared slider state ───────── */
const carousel = useTemplateRef('carousel')
const activeIndex = ref(0)

function onSelect(index: number) {
  activeIndex.value = index
}

function select(index: number) {
  activeIndex.value = index
  carousel.value?.emblaApi?.scrollTo(index)
}



</script>


<template>
  <div class="flex flex-col items-center justify-start p-4">
    <!-- main slider -->
    <UCarousel
        ref="carousel"
        auto-height
        arrows
        prev-icon="i-lucide-chevron-left"
        next-icon="i-lucide-chevron-right"
        v-slot="{ item }"
        :items="props.images"
        :autoplay="{ delay: 5_000 }"
        :ui="{item: 'ps-0',
        controls: 'absolute top-6 inset-x-15',
      dots: '-top-7',
      dot: 'w-1 h-1'}"
        loop
        class="relative w-full"
        @select="onSelect"
    >
      <img :src="item" class="object-cover" alt="Bild"/>
    </UCarousel>

    <!-- thumbnails -->
<!--    <div class="flex flex-wrap gap-2 pt-4">-->
<!--      <button-->
<!--          v-for="(thumb, idx) in props.images"-->
<!--          :key="idx"-->
<!--          @click="select(idx)"-->
<!--          :class="[-->
<!--          'size-16 rounded-lg overflow-hidden opacity-40 hover:opacity-100',-->
<!--          'transition-opacity focus:outline-none focus-visible:ring',-->
<!--          activeIndex === idx && 'opacity-100 ring-2 ring-primary-500'-->
<!--        ]"-->
<!--      >-->
<!--        <img :src="thumb" alt="" class="w-full h-full object-cover"/>-->
<!--      </button>-->
<!--    </div>-->
  </div>
</template>
