<template>
    <section
        :class="[
            'slices-full-bleed-media',
            { diptych: items.length === 2, inset: slice.primary.inset },
        ]"
        :data-slice-type="slice.slice_type"
        :data-slice-variation="slice.variation"
    >
        <prismic-media v-for="item in items" :image="item.image" />
    </section>
</template>

<script setup>
import { computed } from '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-full-bleed-media {
    margin-top: desktop-vw(100px);
    margin-bottom: desktop-vw(100px);
    display: flex;
    width: 100%;

    .prismic-media {
        flex: 1;
    }

    &.diptych {
        .prismic-media {
            border: 1px solid var(--black);
        }
    }
    &.inset {
        padding: 0 desktop-vw(16px);
        gap: desktop-vw(26px);

        .prismic-media {
            border: none;
        }
    }

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

        &.inset {
            padding: 0 var(--layout-margin);
            gap: mobile-vw(29px);
        }
    }
}
</style>
