<template>
  <section class="bg-neutral-10 p-6 rounded-lg min-h-[100%]">
    <div class="mb-12">
      <div class="sm:flex sm:items-center mb-1">
        <h4 class="font-semibold capitalize mb-2 sm:mb-0">All Notifications</h4>
        <div
          class="flex items-center sm:ml-2 bg-neutral-20 border border-neutral-100 py-[1px] px-[6px] rounded-[6px] b-shadow w-fit"
        >
          <div class="w-[6px] h-[6px] rounded-full bg-[#367EE8] mr-[6px]"></div>
          <span class="text-neutral-300 body-xsmall">{{ notifications.length }} Notifications</span>
        </div>
      </div>
      <p class="body-regular text-neutral-l-600 mb-4">
        See all recent and past notifications received
      </p>
    </div>
    <div
      v-for="(notification, index) in notifications"
      :key="index"
      class="flex justify-between pb-3 mb-6 border-b border-neutral-30 max-w-[712px]"
    >
      <div class="flex">
        <div class="mr-3 p-2 rounded-full h-fit bg-neutral-30">
          <BaseCustomIcon :name="notification.icon" />
        </div>
        <div>
          <p class="font-semibold text-sm text-neutral-500">{{ notification.title }}</p>
          <p class="body-regular text-neutral-500 mb-2">{{ notification.message }}</p>
          <p class="body-small text-neutral-200">
            {{ moment(notification.date).format('DD MMM, YYYY . h:mm A') }}
          </p>
        </div>
      </div>
      <div v-if="notification.status === false" class="bg-[#EF1212] w-2 h-2 rounded-full" />
    </div>
  </section>
</template>

<script setup>
import moment from 'moment'

definePageMeta({
  layout: 'default', // Specify the layout to use
  customProp: 'Notifications' // Define your custom prop
})

useHead({
  title: 'Notifications | Duduzili Admin'
})

const notifications = ref([
  {
    title: 'Reported Content Alert',
    message: "A post by @JaneDoe has been reported for 'Hate Speech.' Review now.",
    date: '30 Jan, 2025 . 01:05 PM',
    time: '01:05 PM',
    status: false,
    icon: 'content' // appropriate icon for reported content
  },
  {
    title: 'User Account Suspended',
    message: 'User @ToxicUser has been suspended for violating community guidelines.',
    date: '30 Jan, 2025 . 01:05 PM',
    time: '01:05 PM',
    status: false,
    icon: 'users' // suspended user icon
  },
  {
    title: 'New Broadcast Sent',
    message:
      "Your scheduled broadcast 'New Feature Update' has been successfully sent to all users.",
    date: '30 Jan, 2025 . 01:05 PM',
    time: '01:05 PM',
    status: false,
    icon: 'broadcasts' // broadcast icon
  },
  {
    title: 'New Broadcast Sent',
    message:
      "Your scheduled broadcast 'New Feature Update' has been successfully sent to all users.",
    date: '30 Jan, 2025 . 01:05 PM',
    time: '01:05 PM',
    status: true,
    icon: 'broadcasts' // broadcast icon
  },
  {
    title: 'New Broadcast Sent',
    message:
      "Your scheduled broadcast 'New Feature Update' has been successfully sent to all users.",
    date: '30 Jan, 2025 . 01:05 PM',
    time: '01:05 PM',
    status: true,
    icon: 'broadcasts' // broadcast icon
  },
  {
    title: 'New Broadcast Sent',
    message:
      "Your scheduled broadcast 'New Feature Update' has been successfully sent to all users.",
    date: '30 Jan, 2025 . 01:05 PM',
    time: '01:05 PM',
    status: true,
    icon: 'broadcasts' // broadcast icon
  },
  {
    title: 'New Broadcast Sent',
    message:
      "Your scheduled broadcast 'New Feature Update' has been successfully sent to all users.",
    date: '30 Jan, 2025 . 01:05 PM',
    time: '01:05 PM',
    status: true,
    icon: 'broadcasts' // broadcast icon
  }
])
</script>