<template>
    <section
        class="slices-carousel"
        :data-slice-type="slice.slice_type"
        :data-slice-variation="slice.variation"
    >
        <slider :emblaOptions="{ loop: true }" controls>
            <prismic-media
                class="item"
                v-for="item in items"
                :image="item.image"
                :video="item.video"
                aspect="100"
            />
        </slider>
    </section>
</template>

<script setup>
import { computed } from 'vue'
import Slider from '@/components/Slider.vue'
import PrismicMedia from '@/components/prismic/Media.vue'

const props = defineProps({
    slice: Object,
})

const items = computed(() => props.slice?.primary?.items || [])
</script>

<style lang="scss">
.slices-carousel {
    margin-top: desktop-vw(100px);
    margin-bottom: desktop-vw(100px);
    position: relative;

    .item {
        width: desktop-vw(640px);
    }

    @include mobile {
        margin-top: mobile-vw(100px);
        margin-bottom: mobile-vw(100px);

        .item {
            width: mobile-vw(300px);
        }
    }
}
</style>
