<template>
    <section v-if="similars.length > 0" class="similars">
        <h2>{{ $t('productSimilars') }}</h2>
        <div>
            <template v-if="device == 'desktop'">
                <Button v-for="(btn, i) in arrows" :key="i" v-bind="btn" />
            </template>
            <Swiper v-bind="swiper.similars">
                <SwiperSlide v-for="(item, i) in similars" :key="i">
                    <ProductCard :data="item" type="action" />
                </SwiperSlide>
            </Swiper>
        </div>
    </section>
</template>

<script setup>
const { swiper, arrows } = inject('init')
const { device } = inject('service')
const { similars } = inject('data')
</script>

<style lang="scss">
.product .similars {
    @apply w-full flex flex-col items-center overflow-hidden;

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

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

        .swiper {
            @apply w-full container h-max py-4 px-6;

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

                .swiper-slide {
                    @apply w-max ml-[0.9rem] 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>
