<template>
    <header class="header-desktop">
        <router-link to="/">
            <img src="/images/anahitaLogo.webp" alt="Asan Market" />
        </router-link>
        <AppDesktopHeaderNavigation />
        <div>
        <router-link v-if="!logged" :to="{ path: '/auth/login' }" class="w-40">
          <Button v-bind="btns.login.props" class="not-logged" />
        </router-link>
        <Button
          v-else
          v-bind="btns.account.props"
          @click="overlay($event, btns.account.component)"
          class="text-[#333333] min-w-36"
        />
        <Button
          v-bind="btns.cart.props"
          @click="overlay($event, btns.cart.component)"
          class="text-[#333333] w-16 basket"
        />
      </div>
        <!-- <router-link v-if="!logged" :to="{ path: '/auth/login' }">
            <Button v-bind="btns.login.props" />
        </router-link>
        <div v-else>
            <template v-for="({ props, component }, key) in btns.logged" :key="key">
                <Button v-bind="props" @click="overlay($event, component)" />
            </template>
        </div> -->
    </header>
</template>

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

const logged = useCookie('token')
const { popup } = inject('service')

const overlay = (event, is) => {
    popup.value.is = is
    popup.value.toggle(event)
}
</script>

<style lang="scss">
.header-desktop {
    box-shadow: 0px 2px 20px rgba(0.22, 75.27, 129.62, 0.14);
    @apply w-full h-[3.3rem] lg:h-24 bg-white shadow border-b pl-3 lg:px-3 2xl:p-6 flex items-center justify-between;
    @apply sticky top-0 z-10 xl:gap-4;

    &>a>img {
        @apply text-center w-[180px];
    }

    &>a {
        @apply shrink-0;

        &>button {
            @apply flex items-center text-white;

            .p-button-icon {
                @apply text-2xl;
            }

            .p-button-label {
                @apply font-bold font-iran-sans tracking-widest whitespace-nowrap;
            }
        }
    }


    &>div {
        @apply flex items-center gap-6 2xl:gap-12 relative;

        &::after {
            @apply content-['_'] w-0.5 h-[1.3rem] bg-[#DCDCDC] absolute left-[3.6rem] 2xl:left-[4.4rem];
        }

        button {
            @apply border-[#CCCCCC] h-12 rounded-[0.6rem] #{!important};

            .p-button-label {
                @apply text-lg font-medium font-vazir whitespace-nowrap;
            }

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

            &:first-child {
                @apply pl-6 #{!important};

                .p-button-icon {
                    @apply ml-2.5;
                }
            }

            &:last-child {
                @apply w-12 p-2 relative;

                .p-badge {
                    @apply absolute w-4 h-4 bg-[#B3261E] top-0.5 right-0.5 flex items-center justify-center;
                    @apply text-white text-[0.7em] font-medium leading-none tracking-wide;
                }
            }
        }

        .not-logged {
        @apply w-40 text-white p-2 #{!important};
        .p-button-icon {
          @apply text-white text-2xl;
        }
      }

        .p-blockui-container {
            @apply absolute;
        }
    }
}
</style>
