<script setup lang="ts">
import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
import { useNotificationsStore } from "@/stores/notifications";
import { useNavigationAttributes } from "@/utils/navigation";

const notificationsStore = useNotificationsStore();
const { hasNotificationsMenu } = useNavigationAttributes();
</script>

<template>
  <div v-if="hasNotificationsMenu" class="nav-item leading-none">
    <NotificationPopover>
      <template #toggleButtonContent>
        <div class="relative h-8 w-8">
          <div>
            <it-icon-notification class="h-8 w-8" />
            <div
              v-if="notificationsStore.hasUnread"
              aria-label="unread notifications"
              class="absolute inset-y-0 right-0 h-1.5 w-1.5 rounded-full bg-sky-500"
            />
          </div>
        </div>
      </template>
      <template #popoverContent>
        <NotificationPopoverContent />
      </template>
    </NotificationPopover>
  </div>
</template>
