<script>
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();

    export let title = "modal title";
    export let className = "";
    export let classTitle = "";
    export let classHeader = "";
    export let classBody = "";
    export let classFooter = "";
    export let size = "";
    export let classPosition = "";
    export let showButtonClose = true
</script>

<!-- Modal -->
<div
    class={"modal show " + className}
    tabindex="-1"
    aria-hidden="true"
    style="display: block; background-color: rgb(0 0 0 / 30%)"
>
    <div class={"modal-dialog " + (size ? " modal-" + size : "") + ' ' + classPosition}>
        <div class="modal-content">
            <div class={"modal-header " + classHeader}>
                <h5 class={"modal-title " + classTitle}>{title}</h5>
                {#if showButtonClose}
                    <button type="button" class="btn-close" aria-label="Close"
                        on:click|preventDefault={() => dispatch("close")}>
                    </button>
                {/if}
            </div>
            <div class={"modal-body " + classBody}>
                <slot />
            </div>
            <div class={"modal-footer " + classFooter}>
                <slot name="buttons" />
                <div class="me-auto" />
                {#if showButtonClose}
                    <button
                        type="button"
                        class="btn btn-outline-secondary"
                        on:click|preventDefault={() => dispatch("close")}
                        >Cerrar
                    </button>
                {/if}
            </div>
        </div>
    </div>
</div>
