<template>
    <div class="strapi-map">
        <component
            v-for="item in items"
            v-bind="item"
            :is="MAP[item.__component]"
            :desktopSize="mediaDS"
            :mobileSize="mediaMS"
        />
    </div>
</template>

<script setup>
import Copy from './Copy.vue'
import Diptych from './Diptych.vue'
import EmbeddedVideo from './EmbeddedVideo.vue'
import Media from './Media.vue'

const MAP = {
    'global.copy': Copy,
    'global.media': Media,
    'global.dipytch': Diptych,
    'global.embedded-video': EmbeddedVideo,
}

const props = defineProps({
    items: Array,
    mediaDS: String,
    mediaMS: String,
})

console.log(props.items)
</script>

<style lang="scss">
.strapi-map {
    display: flex;
    flex-direction: column;
    gap: desktop-vw(30px);

    @include mobile() {
        gap: mobile-vw(30px);
    }
}
</style>
