<template>
    <section v-if="relatedPosts.length > 0" class="blog-relateds">
        <div>
            <h2>{{ $t("relatedPosts") }}</h2>
            <Swiper slides-per-view="auto">
                <SwiperSlide v-for="(item, i) in relatedPosts" :key="i">
                    <BlogItem :data="item" type="vertical" />
                </SwiperSlide>
            </Swiper>
        </div>
    </section>
</template>

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

<style lang="scss">
.blog-relateds {
    @apply w-full flex justify-center;

    &>div {
        @apply w-full flex flex-col gap-6 lg:gap-14;

        h2 {
            @apply flex gap-3 lg:gap-6 items-center text-[#333333] font-bold font-vazir;
            @apply text-base lg:text-2xl lg:leading-[1.9rem] px-6;

            &::before {
                @apply content-['_'] w-1 h-[1.2rem] lg:h-6 lg:w-[0.3rem] rounded-full bg-primary-600;
            }
        }

        .swiper {
            @apply container px-6;

            .swiper-wrapper {
                @apply w-max;

                .swiper-slide {
                    @apply w-max ml-[1.1rem] lg:ml-6 last:ml-0;
                }
            }
        }
    }
}
</style>
