<script setup lang="ts">
import NotificationList from "@/components/notifications/NotificationList.vue";
import { useNotificationsStore } from "@/stores/notifications";
import { ref } from "vue";

const notificationsStore = useNotificationsStore();

const numNotificationsToShow = ref(7);

async function loadAdditionalNotifications() {
  numNotificationsToShow.value *= 2;
}
</script>

<template>
  <div class="bg-gray-200">
    <div class="container-large px-8 py-8">
      <header class="mb-6">
        <h1>{{ $t("general.notification_other") }}</h1>
      </header>
      <main>
        <div class="bg-white px-4 py-4">
          <NotificationList :num-notifications-to-show="numNotificationsToShow" />
          <button
            v-if="notificationsStore.allCount > numNotificationsToShow"
            class="mt-4 underline"
            data-cy="load-more-notifications"
            @click="loadAdditionalNotifications()"
          >
            {{ $t("notifications.load_more") }}
          </button>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped></style>
