<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  images: string[]
  mode?: 'slide' | 'fade'
  delay?: number // time in ms between transitions
  duration?: number // how long a transition takes, nonphysical integer
}>()

const classes = useStyling(
  'imageSimpleSlider',
  {
    slots: {
      base: 'w-full h-full [&>*]:w-full [&>*]:h-full',
      image: 'z-10 w-full h-full object-cover',
      overlay: 'absolute z-25 inset-0',
    },
  },
  props
)
</script>

<template>
  <UCarousel
    :class="classes.base"
    :items="props.images"
    v-slot="{ item }"
    :ui="{
      container: 'h-full flex',
      item: 'w-full h-full ps-0',
    }"
    loop
    :autoplay="{ delay: props.delay }"
    :fade="props.mode === 'fade'"
    :duration="props.duration"
  >
    <div class="isolate relative w-full h-full">
      <NuxtImg :class="classes.image" :src="item" />
      <div :class="classes.overlay" />
    </div>
  </UCarousel>
</template>
