<script lang="ts">
    import { apiBaseURL } from "../../../config"
    import { fly } from "svelte/transition"
    import inView from "../../functions/observer"
    let visible = false
    let node
    export let col: Column
    export let pageId: string
    export let i: number
</script>

{#key visible}
    <div
        class="infoBoard"
        bind:this="{node}"
        use:inView="{{ threshold: 0 }}"
        on:enter="{() => {
            visible = true
        }}"
        in:fly="{{ duration: 600, delay: 100 + 100 * (i + 1), x: 300 + i * 200, opacity: 0 }}"
    >
        <div class="header">
            <div class="icon">
                <svg
                    id="mySvgObject{i}"
                    fill="var(--link-font-color)"
                    data-src="{`${apiBaseURL}content/${pageId}/${col.iconInfoBoard.icon?.src}`}"></svg>
            </div>
            <div class="title">
                {col.iconInfoBoard.title}
                <div></div>
            </div>
        </div>
        <div class="content">
            {@html col.iconInfoBoard.text}
        </div>
    </div>
{/key}

<style lang="less">
    @import "../../assets/css/variables.less";
    .infoBoard {
        display: flex;
        flex-direction: column;
        padding: 15px;
        gap: 40px;
        .header {
            display: flex;
            align-items: center;
            gap: 20px;
            .icon {
                width: 64px;
                height: 64px;
                svg {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
            .title {
                font-size: 1.5rem;
                display: flex;
                flex-direction: column;
                color: var(--link-font-color);
                div {
                    border-bottom: 1px solid var(--normal-font-color);
                    width: 50px;
                }
            }
        }
        .content {
            text-align: left;
        }
    }
</style>
