<template>
    <main class="mosaic-item">
        <mosaic-modal :item="activeItem" />
    </main>
</template>

<script setup>
import { useStrapiGlobal } from '@/composables/useStrapi'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const id = route.params.id

const { data: global } = await useStrapiGlobal()

const mosaicItems = computed(() => global.value?.mosaic_items || [])
const activeItem = computed(() =>
    mosaicItems.value.find((item) => item.slug === id),
)
</script>

<style lang="scss">
main.mosaic-item {
    position: relative;
    width: 100%;
}
</style>
