<script lang="ts">
    import { scale } from "svelte/transition"

    export let show: boolean = false
    export let size: string = "md"

    const clickOnBackground = () => {
        show = false
    }
</script>

<div class="modal-wrapper" class:show on:click="{clickOnBackground}">
    <div class="modal modal-{size}" transition:scale on:click|stopPropagation="{() => {}}">
        {#if $$slots.close}
            <div class="modal-close">
                <slot name="close" />
            </div>
        {/if}
        {#if $$slots.header}
            <div class="modal-header">
                <slot name="header" />
            </div>
        {/if}
        {#if $$slots.default}
            <div class="modal-content">
                <slot />
            </div>
        {/if}
        {#if $$slots.header}
            <div class="modal-footer">
                <slot name="footer" />
            </div>
        {/if}
    </div>
</div>
