<template>
    <section class="comments">
        <ProductCommentSummary />
        <div>
            <ProductCommentSort />
            <div>
                <ul>
                    <li v-for="(comment, i) in comments" :key="i">
                        <ProductCommentItem :data="comment" />
                    </li>
                </ul>
            </div>
        </div>
    </section>
</template>

<script setup>
const { comments } = inject('data')
</script>

<style lang="scss">
.product .comments {
    @apply w-full flex gap-[11.4rem] lg:px-6;

    &>div:not([class]) {
        @apply flex flex-col gap-3 lg:gap-8 overflow-hidden grow;

        &>button {
            @apply lg:hidden w-10 h-5 p-0 mr-6;

            .p-button-label {
                @apply text-[0.7em] rtl text-primary-600;
            }
        }

        &>div:nth-of-type(2) {
            &>ul {
                @apply flex lg:flex-col gap-9;
            }
        }
    }
}
</style>
