<template>
    <ul class="navigation">
        <li>
            <Button :label="$t('product-categories')" iconPos="right" severity="secondary" text icon="isax isax-menu-1"
                @click="visible = !visible" />
        </li>
        <li v-for="(item, i) in items" :key="i">
            <component :is="item.link.includes('http') ? 'a' : 'router-link'" :to="item.link" :href="item.link">
                <Button iconPos="right" severity="secondary" text v-bind="item.props" />
            </component>
        </li>
        <li>
            <Button iconPos="right" severity="secondary" text icon="isax isax-search-normal-1"
                @click="$router.push('/search')" />
        </li>
    </ul>
    <AppDesktopHeaderMegaMenu v-model="visible" />
</template>

<script setup>
const items = ref([])
const visible = ref(false)

const { status, data, error } = await useFetch('/api/headers')

if (status.value == 'success')
    items.value = data.value.map((item) => {
        item.props = { label: item.title, icon: 'isax ' + item.icon }
        return item
    })
else throw createError(error.value)
</script>

<style lang="scss">
.navigation {
    @apply flex items-center justify-center lg:gap-6 2xl:justify-between w-full max-w-[70.6rem];

    li:first-child,
    li:last-child {
        @apply flex items-center relative;
    }

    li:first-child::after,
    li:last-child::before {
        @apply content-['_'] w-0.5 h-[1.3rem] bg-[#DCDCDC] absolute;
    }

    li:first-child {
        @apply -ml-1;

        &::after {
            @apply left-0 2xl:-left-3;
        }
    }

    li:last-child {
        @apply -mr-1;

        &::before {
            @apply 2xl:-right-3;
        }
    }

    li {

        button {
            .p-button-icon {
                @apply text-[#333333] text-xl;
            }

            &:not(.p-button-icon-only) .p-button-icon {
                @apply ml-2;
            }

            .p-button-label {
                @apply text-[#333333] text-lg font-medium font-vazir whitespace-nowrap no-underline;
            }
        }
    }

    li:nth-child(n + 7):not(:last-child) {
        @apply max-[1500px]:hidden;
    }

    li:nth-child(n + 6):not(:last-child) {
        @apply max-[1380px]:hidden;
    }

    li:nth-child(n + 5):not(:last-child) {
        @apply max-xl:hidden;
    }

    li:not(:last-child:first-child) {
        @apply max-2xl:-mx-1;
    }
}
</style>
