<script lang="ts">
    import { apiBaseURL } from "../../../config"
    import { mediaLibrary } from "../../store"
    export let iconCycleSquare: IconCycleSquare
    export let pageId: string
    console.log("YEY")
    let active = -1
    if (typeof window !== "undefined") {
        setInterval(() => {
            active += 1
            if (active == iconCycleSquare.boxes.length) active = 0
        }, 1250)
    }
</script>

<div class="iconCycleSquares">
    {#each iconCycleSquare?.boxes as box, i}
        <div class="box" id="box{i}" class:active="{i == active}">
            <div class="content">
                <div class="icon">
                    <svg
                        stroke="{i == active ? '#5b6e98' : 'white'}"
                        fill="{i == active ? '#5b6e98' : 'white'}"
                        data-src="{apiBaseURL}medialib/{box?.icon}/{$mediaLibrary?.[box?.icon]?.file?.src}"></svg>
                </div>
                <div class="text">
                    {box.text}
                </div>
            </div>
        </div>
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .iconCycleSquares {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
        font-size: 0.8rem;
        transition: background-color 600ms;

        @media @tablet {
            font-size: 1rem;
        }
        .box {
            border: 4px solid @signal-color;
            background-color: @signal-color;
            display: flex;
            align-items: center;
            justify-content: center;
            color: @font-color-secondary;
            padding: 10px;
            &.active {
                background-color: @bg-color;
                color: #5b6e98;
            }
            aspect-ratio: 1/1;
            width: calc((100% / 2) - 10px);
            @media (min-width: 950px) and (max-width: 1450px) {
                width: calc((100% / 4) - 10px);
            }
            @media (min-width: 1450px) {
                width: calc((100% / 5) - 10px);
            }
            .content {
                display: flex;
                flex-direction: column;
                align-items: center;
                @media @tablet {
                    gap: 20px;
                }
                .text {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    text-align: center;
                    font-family: "Libre Caslon Text", serif;
                }
            }
        }
    }
</style>
