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

    export let title = "modal title";
    export let className = "";
    export let classTitle = "";
    export let classHeader = "";
    export let size = "";
</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 : "")}>
        <div class="modal-content">
            <div class={"modal-header " + classHeader}>
                <h5 class={"modal-title " + classTitle}>{title}</h5>
                <button
                    type="button"
                    class="btn-close"
                    aria-label="Close"
                    on:click|preventDefault={() => dispatch("close")}
                />
            </div>
            <div class="modal-body">
                <slot />
            </div>
            <div class="modal-footer py-2">
                <slot name="buttons" />
                <div class="me-auto" />
                <button
                    type="button"
                    class="btn btn-secondary border border-light"
                    on:click|preventDefault={() => dispatch("close")}>Cerrar</button
                >
            </div>
        </div>
    </div>
</div>
