<template>
    <div class="most-popular-this-week">
        <h2>{{ $t("mostPopularsThisWeek") }}</h2>
        <router-link to="/">
            <span>{{ $t("show") }}</span>
            <i class="isax isax-arrow-left" />
        </router-link>
        <ul>
            <li v-for="(brand, i) in topBrand" :key="i">
                <router-link :to="{ path: '/search', query: { brand: brand.link } }">
                    <img :src="brand.logo" :alt="brand.title" />
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script setup>
const { topBrand } = inject('data')
</script>

<style lang="scss">
.most-popular-this-week {
    background: linear-gradient(270deg, #6ea89a 0%, #597c74 100%);
    @apply container flex flex-wrap-reverse items-center rounded-lg;
    @apply w-auto p-3 gap-1.5 mx-6 max-w-[97.1rem] min-h-[5.6rem];
    @apply min-[445px]:justify-center sm:flex-row sm:mx-2 sm:gap-4;
    @apply lg:h-[7.6rem] lg:px-7 lg:gap-[1.6rem] xl:px-[4.4rem];

    h2 {
        @apply text-white font-bold font-vazir whitespace-nowrap;
        @apply text-xl lg:text-3xl;
    }

    &>a {
        @apply w-[5.1rem] h-7 flex justify-center items-center gap-1.5 rounded bg-white px-2.5 py-[0.3rem] order-first;
        @apply lg:w-32 lg:h-[2.6rem] lg:gap-3 lg:px-[0.9rem] text-[#549887] min-[445px]:order-none;

        span {
            @apply text-[0.7em] lg:text-[1.2em] font-medium font-iran-sans;
        }

        i {
            @apply text-lg lg:text-2xl;
        }
    }

    ul {
        @apply flex gap-[1.4rem] lg:gap-[2.6rem] items-center mb-1.5 sm:mb-0 md:mr-auto;

        li {
            @apply h-max py-px;

            img {
                @apply object-contain w-14 h-6 lg:w-12 lg:h-12;
            }
        }
    }
}
</style>
