<template>
    <div class="comment-item">
        <img :src="product.coverImage" />
        <div>
            <div>
                <div>
                    <h2>{{ title }}</h2>
                    <span>{{ (new Date(createdAt)).toLocaleDateString('fa-IR') }}</span>
                </div>
                <span>{{ statuses[confirm] }}</span>
                <Button v-bind="btns.options.props" @click="showOptions" />
            </div>
            <p>{{ content }}</p>
        </div>
    </div>
</template>

<script setup>
const props = defineProps(['data'])

const { id, product, title, content, createdAt, confirm } = props.data

const { statuses, btns, options } = inject('init')

const { device, dialog, menu } = inject('service')

const showOptions = (e) => {
    if (device.value == 'desktop') {
        menu.items = options.comment;
        menu.ref.toggle(e)
    } else if (device.value == 'mobile')
        dialog.show(resolveComponent(''), { id })
}

</script>

<style lang="scss">
.comment-item {
    @apply w-[21.4rem] flex gap-[1.1rem] lg:gap-[1.9rem] lg:w-full lg:h-20;

    img {
        @apply w-[3.8rem] h-[3.8rem] lg:w-[5rem] lg:h-[5rem];
    }

    &>div {
        @apply flex flex-col gap-3 lg:w-full;

        &>div {
            @apply h-20 flex justify-between items-center pb-3 border-b border-[#F0F0F1] gap-[1.9rem];

            &>div {
                @apply flex flex-col gap-1.5 font-vazir;

                h3 {
                    @apply flex items-center gap-2 text-[#019907] lg:hidden;

                    i {
                        @apply text-base;
                    }

                    small {
                        @apply text-[0.6em];
                    }
                }

                h2 {
                    @apply text-[#333333] text-sm lg:text-base font-bold;
                }

                span {
                    @apply text-neutral-400 text-[0.7em] lg:text-sm font-medium;
                }
            }

            &>span {
                @apply text-[#019907] text-xs lg:text-base font-vazir mr-auto;
            }

            &>button {
                @apply h-8 w-8 -ml-3 #{!important};

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

        &>p {
            @apply w-[16.5rem] text-[#4C4C4C] text-xs leading-5 font-vazir lg:w-full;
        }
    }
}
</style>
