<template>
    <NuxtLayout :name="device" :config="config">
        <main class="compare">
            <CompareProductList />
            <CompareSpecList />
        </main>
    </NuxtLayout>
</template>

<script setup>
import init from '../../initialize/compare'
const { options } = init()

const config = reactive({
    mobile: { header: { back: true, options } },
})

const { device } = inject('service')
const { meta, params } = useRoute()

const { status, data, error } = await useFetch(`/api/products/comparison/${params.ids}`)

if (status.value == 'success') {
    provide('data', data.value)
}
else throw createError(error.value)
</script>

<style lang="scss">
.compare {
    @apply flex flex-col;

}
</style>