<script>
    import { onMount } from 'svelte';
    import { slide } from 'svelte/transition';

    let extraClasses = "";
    export {extraClasses as class};
    export let slideDuration = 150;
    let animationClass = "";

    export function shake() {
        animationClass = 'shake';
        window.setTimeout(() => animationClass = "", 400);
    }

</script>


<style>
    /* animation from https://svelte.dev/repl/e606c27c864045e5a9700691a7417f99?version=3.58.0 */
    @keyframes shake {
        0% {
            transform: translateX(0px);
        }
        20% {
            transform: translateX(10px);
        }
        40% {
            transform: translateX(-10px);
        }
        60% {
            transform: translateX(5px);
        }
        80% {
            transform: translateX(-5px);
        }
        90% {
            transform: translateX(2px);
        }
        95% {
            transform: translateX(-2px);
        }
        100% {
            transform: translateX(0px);
        }
    }
    .shake {
        animation-name: shake;
        animation-play-state: running;
        animation-duration: 0.4s;
    }
</style>


<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass} {extraClasses}">
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        <span>
            <slot></slot>
        </span>
    </div>

    {#if $$slots.buttons}
        <div>
            <slot name="buttons"></slot>
        </div>
    {/if}
</div>
