<script lang="ts">
  import { notify } from "../../notifications";
  import { fade } from "svelte/transition";
  import type { UpNotification } from "../../notifications";
  import Icon from "../utils/Icon.svelte";

  let notifications: UpNotification[] = [];

  notify.on("notification", (notification) => {
    notifications.push(notification);
    notifications = notifications;

    setTimeout(() => {
      notifications.splice(
        notifications.findIndex((n) => (n.id = notification.id)),
        1
      );
      notifications = notifications;
    }, 5000);
  });

  const icons = {
    error: "error-alt",
    warning: "error",
  };
</script>

{#each notifications as notification (notification.id)}
  <div
    class="notification notification-{notification.level || 'info'}"
    transition:fade
  >
    <Icon name={icons[notification.level] || "bell"} />
    {notification.content}
  </div>
{/each}

<style scoped lang="scss">
  @use "../../styles/colors";

  .notification-error {
    color: colors.$red;
  }

  .notification-warning {
    color: colors.$orange;
  }
</style>
