<template>
	<Carousel
		:gap="40"
		:items-to-show="1"
		:wrap-around="true"
		:autoplay="4200"
		:transition="600"
		:mouse-drag="false"
		:touch-drag="true"
	>
		<Slide v-for="slide in slides" :key="slide.id">
			<img :src="slide.formats?.medium?.url || slide.url" alt="Product Image" class="rounded-xl shadow-xl" />
		</Slide>

		<template #addons>
			<Pagination />
		</template>
	</Carousel>
</template>

<script setup lang="ts">
import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination } from "vue3-carousel";
import type { MediaData } from "~/types";

defineProps<{
	slides: MediaData[];
}>();
</script>
