<template>
    <component
        v-for="(slice, index) in slices"
        :key="index"
        :is="mapComponent(slice)"
        :slice="slice"
    />
</template>

<script setup>
import Carousel from '@/components/slices/Carousel.vue'
import Content from '@/components/slices/Content.vue'
import FullBleedMedia from '@/components/slices/FullBleedMedia.vue'
import Quote from '@/components/slices/Quote.vue'

const MAP = {
    carousel: Carousel,
    content: Content,
    full_bleed_media: FullBleedMedia,
    quote: Quote,
}

const props = defineProps({
    slices: Array,
})

const mapComponent = (slice) => {
    if (!slice?.slice_type) return

    return MAP[slice.slice_type]
}
</script>
