<template>
    <section class="tab-comments">
        <Button :label="$t('commentsCount', { count: 4 })" text @click="handleClick" />
        <Swiper>
            <SwiperSlide v-for="(item, i) in items" :key="i">
                <ProductCommentCard :data="item" />
            </SwiperSlide>
        </Swiper>
    </section>
</template>

<script setup>

</script>

<style lang="scss">
.product .tab-comments {
    @apply flex flex-col gap-1 items-start;

    &>button {
        @apply mr-3 #{!important};

        .p-button-label {
            @apply text-[#47B556];

        }
    }

    .swiper {
        @apply w-full h-[13.1rem] px-6;

        .swiper-wrapper {
            @apply w-max z-0;

            .swiper-slide {
                @apply h-max w-max ml-2.5 last:ml-0;

            }
        }
    }
}
</style>