<template>
    <section class="cart-bought-products">
        <div>
            <h2>{{ $t("buyersBoughtProducts") }}</h2>
            <Swiper slides-per-view="auto">
                <SwiperSlide v-for="(product, i) in buyers" :key="i">
                    <ProductCard :data="product" mode="main" />
                </SwiperSlide>
            </Swiper>
            <HomeMostPopularThisWeek />
        </div>
    </section>
</template>

<script setup>
const { buyers = [] } = inject('data')
</script>

<style lang="scss">
.cart-bought-products {
    @apply flex justify-center py-6 lg:py-16 bg-[#F6F8FA];

    & > div {
        @apply container flex flex-col gap-6 lg:gap-16;

        & > h2 {
            @apply text-[#333333] self-center text-lg lg:text-3xl font-bold font-vazir;
        }

        & > .swiper {
            @apply w-full py-2 lg:py-4 ;

            .swiper-wrapper {
                @apply w-max;

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

        & > .home-most-popular-this-week {
            @apply hidden lg:flex;
        }
    }
}
</style>
