<template>
    <div class="product-comments">
        <div>
            <Button icon="isax isax-arrow-right-1" link @click="$emit('close')" />
            <h2>{{ $t("commentsCount", { count: 5 }) }}</h2>
            <Button icon="isax isax-document-filter" link @click="handleClick" />
        </div>
        <div>
            <ul>
                <li v-for="(item, i) in items" :key="i">
                    <ProductCommentItem :data="item" />
                </li>
            </ul>
        </div>
        <Button :label="$t('submitComment')" icon="isax isax-message" rounded @click="handleClick" />
    </div>
</template>

<script setup>
const items = reactive([{}, {}, {}, {}, {}, {}, {}, {}, {}]);

</script>

<style lang="scss">
.product-comments {
    @apply w-full bg-white rounded-t-[0.6rem] flex flex-col gap-10 relative px-6 pt-6 overflow-hidden;

    &>div:nth-of-type(1) {
        @apply w-full flex items-center gap-3;

        &>h2 {
            @apply text-[#333333] text-sm font-medium font-vazir ml-auto;
        }

        &>button {
            @apply -mx-4 -my-3;

            .p-button-icon {
                @apply text-[#333333] text-[1.4em];
            }
        }
    }

    &>div:nth-of-type(2) {
        @apply h-full overflow-y-auto;

        &::-webkit-scrollbar {
            @apply hidden;
        }

        &>ul {
            @apply h-max flex flex-col gap-6;
        }
    }

    &>button {
        @apply absolute left-6 bottom-5 w-[8.3rem] h-12 px-[1.4rem] #{!important};

        .p-button-label {
            @apply text-xs font-vazir;
        }

        .p-button-icon {
            @apply text-xl;
        }
    }
}
</style>
