<template>
    <section class="est-products">
        <div>
            <div v-for="(items, key) in { newProduct, topProduct }" :key="key">
                <h2>{{ $t(key) }}</h2>
                <h3>
                    <span>
                        {{ $t("toViewProducts", { title: $t(key) }) }}
                    </span>
                    <router-link to="/products">
                        {{ $t("clickHere") }}
                    </router-link>
                </h3>
                <div>
                    <template v-for="(btn, i) in btns.arrows" :key="i">
                        <Button v-if="device == 'desktop'" v-bind="btn" />
                    </template>
                    <Swiper v-bind="swipers[key]" :class="key">
                        <SwiperSlide v-for="(item, i) in items" :key="i">
                            <ProductCard :data="item" type="main" />
                        </SwiperSlide>
                    </Swiper>
                </div>
            </div>
            <HomeMostPopularThisWeek />
        </div>
    </section>
</template>

<script setup>
const { newProduct, topProduct } = inject('data')
const { swipers, btns } = inject('init')
const { device } = inject('service')
</script>

<style lang="scss">
.est-products {
    @apply w-full bg-[#F6F8FA] py-6 lg:py-20 overflow-hidden;

    &>div {
        @apply w-full lg:container flex flex-col mx-auto;

        &>div:not([class]) {
            @apply flex flex-col;

            &:nth-of-type(2) {
                @apply order-last mt-10 lg:mt-20;
            }

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

            &>h3 {
                @apply flex items-center gap-1.5 mt-1.5 mr-6 font-vazir;
                @apply text-sm lg:text-xl lg:mt-2 lg:mr-4;

                span {
                    @apply text-[#8C8C8C] lg:leading-9;
                }

                a {
                    @apply text-primary-600 font-bold lg:leading-[2.8rem];
                }
            }

            &>div {
                @apply flex gap-10 w-full h-max mt-2 mb-8 lg:my-16 relative;

                .swiper {
                    @apply w-full h-max mx-0 p-2.5 lg:py-4;

                    .swiper-wrapper {
                        @apply w-max h-max;

                        .swiper-slide {
                            @apply h-max w-max rtl ml-3 lg:ml-5 last:ml-0;
                        }
                    }
                }

                &>button {
                    @apply w-10 h-10 self-center absolute text-xl p-0 bg-[#B2B2B2] border-none #{!important};
                    @apply first-of-type:-right-16 last-of-type:-left-16 max-lg:hidden;
                }
            }
        }
    }
}
</style>
