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

  let notifications: { [key: string]: Notification } = {};

  notify.on("notification", (notif) => {
    let id = Math.random();
    notifications[id] = notif;
    setTimeout(() => {
      delete notifications[id];
      notifications = notifications;
    }, 5000);
  });

  const icons = {
    "error": "exclamation-triangle"
  }
</script>

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

<style scoped lang="scss">
  .notification-error {
    color: var(--error);
  }
</style>
