<script>
  import { fade } from "svelte/transition";

  export let toasts = [];
  export let fade_after = 5000;

  export const send_toast = (msg) => {
    toasts.push(msg);
    toasts = toasts;

    setTimeout(() => {
      toasts.shift();
      toasts = toasts;
    }, fade_after);
  }

  export let orientation = "bottom left";
</script>

<toast-list class="{ orientation }" class:active={ toasts.length > 0 }>
  {#each toasts as toast}
    <toast transition:fade|local>
    { toast }
    </toast>
  {/each}
</toast-list>
