<script lang="ts" setup>
import {useNotificationStore} from "~/store/notification";

const notification = computed(() => useNotificationStore().notification);
const hasNotification = computed(() => useNotificationStore().hasNotification);
const type = computed(() => useNotificationStore().type);

</script>
<template>
  <main-header/>
  <main class="main-content">
    <slot/>
    <toaster v-if="hasNotification" :title="notification.message" :type="type">
      <ul v-if="notification.details && Array.isArray(notification.details)">
        <li v-for="error in notification.details">{{ error }}</li>
      </ul>
      <p v-else-if="notification.details">
        {{ notification.details}}
      </p>
    </toaster>
  </main>
  <main-footer/>
</template>
