<script lang="ts" setup>
import iconUser from '#adata-ui/icons/user.vue'

export interface Notification {
  id: number
  message: string
  date: string
  email: string
  status: string
}

defineProps<{
  notifications: Notification[]
}>()
</script>
<template>
  <div class="flex w-[423px] flex-col gap-4 rounded-lg bg-white p-4 dark:bg-gray-900">
    <div class="flex items-center justify-between">
      <!--      <h4 class="heading-04">{{ $t('header.notifications.title') }}</h4>-->
      <h4 class="heading-04">Уведомления</h4>
      <ADigitBadge :value="`${notifications?.length} новых`" size="lg" />
    </div>
    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />

    <ul v-if="notifications?.length" class="flex flex-col gap-2">
      <li
        v-for="(notification, idx) in notifications"
        :key="idx"
        class="flex items-center justify-between gap-2.5 rounded-md bg-gray-50 px-4 py-2 dark:bg-gray-950"
      >
        <div class="rounded-full bg-blue-500 p-2">
          <icon-user />
        </div>
        <div class="flex flex-col items-start gap-1 break-all">
          <p class="body-s-400">
            {{ notification.message + ' ' }}
            <a class="link-s-400" href="#">{{ notification.email }}</a>
          </p>
          <p class="text-[12px] leading-4 dark:text-gray-300">{{ notification.date }}</p>
        </div>
      </li>
    </ul>

    <div v-else class="flex flex-col items-center gap-4 py-8">
      <p class="body-400">Новых уведомлений нет</p>
    </div>

    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />
    <AButton block>Посмотреть все уведомления</AButton>
  </div>
</template>
