<script lang="ts">
    import { toast, toasts } from "./toast";
    import { fade } from "svelte/transition";
    import InfoIcon from "../icons/severity/InfoIcon.svelte";
    import WarningIcon from "../icons/severity/WarningIcon.svelte";
    import ErrorIcon from "../icons/severity/ErrorIcon.svelte";
    import SuccessIcon from "../icons/severity/SuccessIcon.svelte";
</script>

{#if $toasts.length >= 1}
    <div class="fixed bottom-0 right-0 z-50 flex w-full flex-col gap-2 p-4 text-white sm:w-96">
        {#each $toasts as toastItem}
            <div
                class:bg-red-500={toastItem.type === "error"}
                class:bg-green-500={toastItem.type === "success"}
                class:bg-orange-500={toastItem.type === "warning"}
                class:bg-blue-500={toastItem.type === "info"}
                class="card flex items-center gap-3 border-contrast-900 px-4 py-3 shadow-md dark:border-contrast-100"
                transition:fade={{ duration: 200 }}
            >
                <div
                    class:text-red-900={toastItem.type === "error"}
                    class:text-green-900={toastItem.type === "success"}
                    class:text-orange-900={toastItem.type === "warning"}
                    class:text-blue-900={toastItem.type === "info"}
                    class="shrink-0"
                >
                    {#if toastItem.type === "info"}
                        <InfoIcon class="w-7"></InfoIcon>
                    {:else if toastItem.type === "warning"}
                        <WarningIcon class="w-7"></WarningIcon>
                    {:else if toastItem.type === "error"}
                        <ErrorIcon class="w-7"></ErrorIcon>
                    {:else if toastItem.type === "success"}
                        <SuccessIcon class="w-7"></SuccessIcon>
                    {/if}
                </div>

                <p class="grow">
                    {toastItem.text}
                </p>

                <button on:click={() => toast.dismiss(toastItem.id)} class="shrink-0" aria-label="dismiss">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        {/each}
    </div>
{/if}
