<script setup lang="ts">
import { Splide } from '@splidejs/vue-splide'
import type { ResponsiveOptions } from '@splidejs/splide'

interface Props {
  autoplay?: boolean | string
  arrows?: boolean
  pagination?: boolean
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  autoplay: false,
  arrows: true,
  pagination: true,
})

const options = computed((): ResponsiveOptions => {
  return {
    type: 'fade',
    rewind: true,
    perPage: 1,
    perMove: 1,
    speed: 600,
    updateOnMove: true,
    autoplay: props.autoplay,
    arrows: props.arrows,
    pagination: props.pagination,
    classes: {
      arrows: 'splide-arrows type-full',
      arrow: 'splide-arrow',
      prev: 'arrow-prev',
      next: 'arrow-next',
      pagination: 'splide-pagination-bullets type-full',
      page: 'splide-pagination-bullet',
    },
  }
})
</script>

<template>
  <Splide :options="options" class="h-full">
    <slot />
  </Splide>
</template>

<style scoped>
.splide:deep(.splide__track) {
  @apply h-full;
}
</style>
