<template>
    <div class="notification-item" :class="{ 'unread': !read }">
        <h2>{{ title }} </h2>
        <div>
            <span>{{ new Date(createdAt).toLocaleTimeString('fa-IR') }}</span>
            <i />
            <span>{{ new Date(createdAt).toLocaleDateString('fa-IR') }}</span>
        </div>
        <p v-html="content"></p>
    </div>
</template>

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

<style lang="scss" scoped>
.notification-item {
    @apply w-full h-[5.8rem] lg:h-[6.4rem] font-vazir rounded-[0.6rem] bg-[#FAFAFA];
    @apply flex flex-wrap items-center justify-between gap-y-2 p-6 lg:gap-2.5;

    h2 {
        @apply text-[#333333] text-xs lg:text-base lg:font-bold lg:w-full truncate;
    }

    p {
        @apply text-neutral-600 text-xs lg:text-base leading-loose truncate w-full lg:w-max;
    }

    div {
        @apply flex items-center gap-1.5 lg:gap-3 lg:order-last;

        span {
            @apply text-zinc-500 text-[0.6em] lg:text-base font-medium whitespace-nowrap;
        }

        i {
            @apply w-2 h-2 bg-neutral-200 rounded-full;
        }
    }

    &.unread {
        @apply shadow-[0px_0px_7px_#0000001a] bg-white;

        h2 {
            @apply font-bold;
        }
    }
}
</style>
