<template>
    <ul class="product-sort">
        <li>
            <i class="isax isax-sort"></i>
            <span>{{ $t('ordering') }}:</span>
        </li>
        <li v-for="(sort, i) in sorts" :key="i">
            <router-link :to="{ query: { ...$route.query, sort } }">
                <Button :label="$t(sort)" :disabled="sort == currentSort" link />
            </router-link>
        </li>
        <li>{{ products.length }} {{ $t('commodity') }}</li>
    </ul>
</template>

<script setup>
const { products = [] } = inject('data')
const { sorts } = inject('init')
const route = useRoute()
const currentSort = computed(() => route.query.sort || 'mostRelevant')
</script>

<style lang="scss">
.product-sort {
    @apply flex items-center border-b-2 border-[#EBEBEB] whitespace-nowrap;

    li:first-child {
        @apply flex items-center gap-2 text-[#333333] ml-1;

        i {
            @apply text-base xl:text-[1.4em];
        }

        span {
            @apply text-xs xl:text-[1.1em] font-bold font-vazir;
        }
    }

    li:last-child {
        @apply mr-auto text-[#999999] text-[1.1em] font-bold font-vazir max-xl:hidden;
    }

    li {
        button {
            .p-button-label {
                @apply text-[#999999] text-xs xl:text-[1.1em] font-bold font-vazir;
            }

            &:disabled {
                @apply opacity-100;

                .p-button-label {
                    @apply text-[#47B556];
                }
            }
        }
    }
}</style>
