<script lang="ts" setup>
import NotificationsMenu from './NotificationsMenu.vue'
import AButton from '#adata-ui/components/elements/button/AButton.vue'
import Notification from '#adata-ui/icons/notification.vue'

const notifications = [
  {
    id: 1,
    message: 'Вам пришло новое уведомление',
    date: '12.08.2023 14:20',
    email: ''
  },
  {
    id: 2,
    message: 'Вам пришло новое уведомление',
    date: '12.08.2023 14:20',
    email: ''
  },
  {
    id: 3,
    message: 'Вам пришло новое уведомление',
    date: '12.08.2023 14:20',
    email: ''
  },
  {
    id: 2,
    message: 'Вам пришло новое уведомление',
    date: '12.08.2023 14:20',
    email: ''
  },
  {
    id: 3,
    message: 'Вам пришло новое уведомление',
    date: '12.08.2023 14:20',
    email: ''
  }
]

const initState = () => ({
  notifications
})
</script>

<template>
  <Story title="Navigation/Notification Menu">
    <Variant :init-state="initState" title="Notifications Menu">
      <template #default="{ state }">
        <div class="bg-black p-10">
          <a-button
            class="!text-deepblue-900 dark:!text-gray-50"
            form="icon"
            variant="ghost"
            view="transparent"
          >
            <a-dropdown>
              <template #default="{ onExpand }">
                <notification @click="onExpand" />
              </template>
              <template #content>
                <NotificationsMenu :notifications="state.notifications" />
              </template>
            </a-dropdown>
          </a-button>
        </div>
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
