<template>
    <div class="product-comment-item">
        <p>{{ content }}</p>
        <div>
            <span>
                {{
                    new Date(createdAt).toLocaleDateString('fa', {
                        month: 'long', year: 'numeric', day: 'numeric'
                    })
                }}
            </span>
            <span>{{ userID?.firstName }} {{ userID?.lastName }}</span>
        </div>
    </div>
</template>

<script setup>
const props = defineProps(['data'])
const { createdAt, userID, content } = props.data
</script>

<style lang="scss">
.product-comment-card {
    @apply w-[16.9rem] h-[13.1rem] rounded-xl border p-[1.1rem] flex flex-col justify-between;

    p {
        @apply w-full text-[#7F7F7F] font-vazir text-xs leading-5;
    }

    &>div {
        @apply flex gap-1.5 items-center;

        span:nth-child(1) {
            @apply text-[#B2B2B2] font-vazir text-[0.7em];
        }

        span:nth-child(2) {
            @apply relative flex items-center gap-1.5;

            &::before {
                @apply content-['_'] w-1.5 h-1.5 bg-neutral-200 rounded-full;
            }
        }

    }
}
</style>
