<script lang="ts">
    import { getDBEntries } from "../../../api"
    import { mdiCloseCircleOutline } from "@mdi/js"
    import Icon from "./Icon.svelte"

    let content: string[] = []
    let currentIndex = 0
    export let isVisible = true

    getDBEntries("bannerSlide").then((entries) => {
        content = entries.map((el) => el.text)
        isVisible = content.length > 0
        if (content.length > 0) {
            setInterval(() => {
                currentIndex = (currentIndex + 1) % content.length
            }, 3000) // Interval für die Anzeige jedes Banners
        }
    })

    function closeBanner() {
        isVisible = false
    }
</script>

<section
    class="banner"
    class:visible={isVisible}
    class:inVisible={!isVisible}
>
    {#if isVisible}
        <div class="text-slide">
            {#key currentIndex}
                <small class="banner-text">
                    {@html content[currentIndex]}
                </small>
            {/key}
        </div>
        <button
            on:click={closeBanner}
            class="close-btn"
            aria-label="Close banner"
        >
            <Icon
                path={mdiCloseCircleOutline}
                size="20px"
                color="#625755"
            />
        </button>
    {/if}
</section>

<style lang="less">
    .banner {
        width: 100%;
        height: 100%;
        background: var(--bg-100);
        color: var(--text-300);
        border-bottom: 1px solid var(--text-300);
        padding: 0.3rem 0.5rem 0.3rem 0.5rem;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;

        overflow: hidden;
        &.inVisible {
            height: 0px;
            padding: 0px;
        }
        .text-slide {
            width: 100%;
            text-align: center;
            overflow: hidden;
        }
        @keyframes opacityText {
            0%,
            100% {
                opacity: 0.3;
            }
            20%,
            50%,
            80% {
                opacity: 1;
            }
        }
        .banner-text {
            color: var(--text-300);
            animation: opacityText;
            animation-duration: 3000ms;
            animation-iteration-count: infinite;
        }
        .close-btn {
            color: var(--text-300);
            border: none;
            position: absolute;
            right: 10px;
            background: none;
            cursor: pointer;
            font-size: 16px;
        }
    }
</style>
