<script lang="ts">
    import { fly } from "svelte/transition"

    export let col: Column
    export let siteId: string
    export let i: number
    import { apiBaseURL } from "../../../config"
    import inView from "../../functions/observer"
    let visible = false
    let node
</script>

{#key visible}
    <main
        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="img-container">
            <img
                src="{`${apiBaseURL}content/${siteId}/${col.image?.src}?filter=${
                    typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                }`}"
                alt="img"
            />
        </div>
        <div class="title-container">
            {@html col?.title}
        </div>
        <div class="description-container">
            {@html col?.text}
        </div>
        <div class="links">
            {#if col?.links}
                {#each col?.links as link}
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"
                            fill="var(--link-font-color)"></path>
                    </svg>
                {/each}
            {/if}
        </div>
    </main>
{/key}

<style lang="less">
    @import "../../assets/css/variables.less";
    main {
        flex: 1;
        max-width: @body-small-maxwidth;
        .img-container {
            width: 100%;
            height: 270px;
            @media @tablet {
                height: 65vw;
            }
            @media @desktop {
                height: 270px;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                padding: 1rem 0px;
            }
        }
        .title-container {
            font-weight: 700;
            padding-bottom: 1.2rem;
        }

        .links {
            margin-top: 25px;
            img {
                transform: scale(1.4);
                margin: 0.5rem 0.9rem 0.5rem 0.4rem;
            }
            button {
                display: flex;
                align-items: center;
                color: var(--link-font-color);
                font-weight: 600;
                margin: 10px 0px;
            }
        }
    }
</style>
