<template>
  <Swiper
      :lazy="true"
      :modules="modules"
      :pagination="pagination"
      @sliderMove="hapticScroll"
      class="radius-box"
  >
    <SwiperSlide
        v-for="image in images"
        :key="image.url"
    >
      <img
          :src="image.url"
          :alt="image.alt"
          loading="lazy"
          class="w-full h-full radius-box"
      />
    </SwiperSlide>
  </Swiper>
</template>

<script setup>
import {Swiper, SwiperSlide} from 'swiper/vue';
import {useHapticScroll} from "@/composables/useHapticScroll.js";

const props = defineProps({
  images: {
    type: Array,
    default: () => [],
  },
});

const modules = [];
const hapticScroll = useHapticScroll();
const pagination = {
  clickable: true,
  dynamicBullets: false,
};
</script>

<style scoped>
.radius-box {
  border-radius: var(--radius-box);
}
</style>
