<template>
    <section class="popular-categories">
        <div>
            <h2>{{ $t("popularCategories") }}</h2>
            <div>
                <ul>
                    <li v-for="({ link, headerImage, name }, i) in topCategory" :key="i">
                        <router-link :to="{ path: '/search', query: { category: link } }">
                            <div>
                                <!-- <span :style="style(bg)"></span> -->
                                <img :src="headerImage" />
                            </div>
                            <h3>{{ name }}</h3>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</template>

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

const bg = reactive({ from: '#E1FFEB', to: '#D8E7FA' })
const style = (bg) => `background: linear-gradient(143.73deg, ${bg.from} 5.62%, ${bg.to} 99.35%)`

</script>

<style lang="scss">
.popular-categories {
    @apply w-full flex justify-center mt-16 lg:mt-[10.8rem];

    &>div {
        @apply container flex flex-col items-center gap-10 lg:gap-16 w-full;

        h2 {
            @apply text-[#0B1F11] text-xl lg:text-3xl font-bold font-vazir;
        }

        &>div {
            @apply overflow-x-auto w-full rtl;

            &::-webkit-scrollbar {
                @apply hidden;
            }

            ul {
                @apply rtl grid grid-rows-2 grid-flow-col justify-items-center gap-[1.9rem] w-max mx-auto lg:gap-0 lg:gap-y-8;

                li {
                    @apply justify-self-center;
                    a {
                        @apply m-auto flex flex-col items-center;
                        @apply w-[4.6rem] h-[6rem] justify-between;
                        @apply lg:w-[16.2rem] lg:h-[15.6rem] lg:gap-[0.6rem];

                        div {
                            @apply flex relative h-full w-full xl:pt-2.5;

                            // span {
                            //     @apply rounded-full -z-10;
                            //     @apply w-[4.3rem] h-[4.3rem];
                            //     @apply lg:w-[11.8rem] lg:h-[11.8rem];
                            // }

                            img {
                                @apply m-auto object-contain absolute left-1/2 -translate-x-1/2;
                                @apply w-[3.6rem] h-[3rem];
                                @apply lg:w-[11.8rem] lg:h-[11.8rem];
                            }
                        }

                        h3 {
                            @apply text-[#191919] font-bold font-vazir;
                            @apply text-[0.7em] lg:text-[1.2em] truncate w-full text-center;
                        }
                    }
                }
            }
        }
    }
}
</style>
