<template>
    <section class="cart-tabs">
        <ul>
            <li v-for="(item, i) in tabs" :key="i">
                <div :active="select == i" @click="select = i" v-ripple>
                    <h2>{{ $t(item) }}</h2>
                    <span>{{ i < 1 ? data.length : 0 }}</span>
                </div>
            </li>
        </ul>
        <Button v-if="device == 'desktop' && data.length > 0" :label="$t('removeAllFromCart')" icon="isax isax-trash"
            iconPos="right" text raised severity="danger" :loading="loading" @click="clear()" />
    </section>
</template>

<script setup>
const select = ref(0);
const data = inject('data')
const tabs = reactive(["cart", "previousPurchase"])
const { device } = inject('service')

const loading = ref(false)
const cart = useCartStore()

const clear = async () => {
    loading.value = true
    await cart.clear()
    loading.value = false
}
</script>

<style lang="scss">
.cart-tabs {
    @apply container w-full h-max max-lg:sticky top-0 flex justify-center lg:justify-start items-center pr-6 lg:pr-0 lg:border-b-2 border-[#E5E5E5];
    @apply bg-white max-lg:z-[1]; 
    ul {
        @apply flex items-center lg:ml-[33.8rem];

        li {
            @apply whitespace-nowrap;

            div {
                @apply px-8 py-2.5 lg:px-6 lg:pb-6 flex items-center gap-3 hover:bg-gray-50 rounded-md cursor-pointer;

                h2 {
                    @apply text-[#999999] text-lg font-normal lg:text-2xl lg:font-medium font-vazir;
                }

                span {
                    @apply w-[1.4rem] h-[1.4rem] lg:w-8 lg:h-8 bg-[#F2F2F2] rounded flex items-center justify-center;
                    @apply text-xs lg:text-lg font-medium font-vazir text-[#999999];
                }
            }
        }

        li:has([active="true"]) {
            @apply relative;

            * {
                @apply text-primary-600;
            }

            &::after {
                @apply content-['_'] inset-x-0 -bottom-[0.2rem] rounded-full h-0.5 lg:h-1 bg-primary-600 absolute;
            }
        }
    }

    button {
        @apply h-[3.6rem] mb-3.5 text-[#AD3434];

        .p-button-label {
            @apply text-sm font-medium font-vazir
        }
    }
}
</style>
