<template>
    <div class="summary">
        <h2>{{ $t('buyersComments') }}</h2>
        <div>
            <i class="isax isax-star-15"></i>
            <bdi>5 / {{ product.stars }}</bdi>
        </div>
        <p>{{ $t('buyersCommentsDesc') }}</p>
        <Button v-bind="btns.submit.props" @click="handleClick" />
    </div>
</template>

<script setup>
const { btns } = inject('init')
const product = inject('data')
const { dialog } = inject('service')

const handleClick = () => {
    dialog.show(resolveComponent('ProductCommentDialogForm'), product)
}
</script>

<style lang="scss">
.product .comments>.summary {
    @apply flex w-[18.3rem] flex-col gap-4;

    h2 {
        @apply flex gap-3 items-center text-primary-600 text-xl font-bold font-vazir;

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

    div {
        @apply flex gap-2 items-center mt-6;

        i {
            @apply text-xl text-[#FFB628];
        }

        bdi {
            @apply text-[#191919] text-xl font-normal font-vazir;
        }
    }

    p {
        @apply text-[#999999] font-vazir;
    }

    button {
        @apply h-[3.4rem] text-xl font-medium font-iran-sans #{!important};
    }

}
</style>