<template>
    <NuxtLayout :name="device" :config="config">
        <main class="panel-favorites">
            <ul>
                <li v-for="(product, i) in items" :key="i">
                    <ProductCard :data="product" type="main" />
                </li>
            </ul>
            <AppPagination :pages="pages" />
        </main>
    </NuxtLayout>
</template>

<script setup>
const { device, t } = inject('service')
const config = reactive({
    desktop: { toolbar: true }, mobile: { header: { back: true, title: t('favorites') } },
})

const items = ref([])
const pages = ref(1)
const { meta, query } = useRoute()
const { page = 1 } = query

const { status, data, error } = await useFetch(`/api/users/current/fave/${page}`, {
    headers: {
        Authorization: useCookie('token')
    }
})


if (status.value == 'success') {
    items.value = data.value.favoriteProducts
    pages.value = data.value.pages

} else throw createError(error.value)
</script>

<style lang="scss">
.panel-favorites {
    @apply flex flex-col gap-3 lg:gap-6 justify-center lg:justify-start mx-auto lg:container;
    @apply pt-8 pb-20 lg:pt-14 lg:pb-[7.5rem] lg:min-h-[60vh];

    &>ul {
        @apply w-full flex flex-wrap gap-3 lg:gap-6 justify-center lg:justify-start mx-auto lg:container;


        @media (max-width: 1024px) {
            .product-card {
                @apply w-[21.4rem] h-[9.4rem] flex-row shadow-none border-0 rounded-none gap-4 p-0;
                @apply mt-[1.1rem] border-b border-[#E5E5E5];

                &>img {
                    @apply w-[7.4rem] h-[7.4rem] object-contain object-top self-start;
                }

                &>div {
                    @apply pb-6;

                    h2 {
                        @apply mt-0 text-[0.7em];
                    }

                    h1 {
                        @apply text-xs;
                    }

                    &>button {
                        @apply left-0 bottom-3;

                        .p-button-icon {
                            @apply text-xl;
                        }
                    }
                }
            }
        }
    }
}
</style>
