<script setup>
import { useNotificationStore } from '@/stores/notifications.js';
import { onMounted } from 'vue';

const notificationStore = useNotificationStore();

onMounted(() => {
    notificationStore.fetchNotifications();
});

const markAsRead = (id) => {
    notificationStore.markAsRead(id);
};
</script>

<template>
    <div class="container mt-4">
        <h3 class="mb-3">Уведомления</h3>

        <ul class="list-group">
            <li
                v-for="notification in notificationStore.notifications"
                :key="notification.id"
                class="list-group-item d-flex justify-content-between align-items-start"
                :class="{ 'fw-bold': !notification.is_read }"
                @click="markAsRead(notification.id)"
                style="cursor: pointer"
            >
                <div class="me-auto">
                    <div>{{ notification.title }}</div>
                    <small class="text-muted">{{ notification.content }}</small>
                    <small class="text-muted">{{ new Date(notification.created_at).toLocaleString() }}</small>
                </div>
                <span v-if="!notification.is_read" class="badge bg-primary rounded-pill">новое</span>
            </li>
        </ul>
    </div>
</template>
