<script lang="ts">
    import { Circle } from "svelte-loading-spinners"

    export let active = false
    export let styles: string = ""
    export let progress = false
    export let loaded = 0
    export let total = 0

    $: percentage = total > 0 ? Math.round((loaded / total) * 100) : 0
</script>

<div
    class="loadingWrapper"
    class:active={active}
>
    {#if active}
        <div class="spinner">
            <Circle
                size="2"
                color="#741e20"
                unit="rem"
            />

            {#if progress}
                <span>{percentage} %</span>
            {/if}
        </div>
    {/if}
    <div
        class="content"
        style={styles}
    >
        <slot />
    </div>
</div>

<style lang="less">
    .loadingWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
        margin: 0px;
        width: 100%;

        &.active {
            pointer-events: none;
        }
        .spinner {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.2rem;
            span {
                color: var(--text-invers-100);
                font-size: 1.2rem;
            }
        }
        &.active {
            .content {
                opacity: 0.5;
            }
        }
        .content {
            width: 100%;
        }
    }
</style>
