<script lang="ts">
    import inView from "../../functions/observer"
    import { fly } from "svelte/transition"
    export let rows: Row[]
    function scrollToRow(name: string) {
        const element = document.getElementsByName(name)[0]
        if (element) {
            element.scrollIntoView({ behavior: "smooth" })
        }
    }
    let visible = false
    let node
</script>

{#key visible}
    <div
        class="siteRefs"
        bind:this="{node}"
        use:inView="{{ threshold: 0 }}"
        on:enter="{() => {
            visible = true
        }}"
    >
        {#each rows as row, i}
            {#if row.title && i != 0}
                <button
                    class="siteRef"
                    on:click="{() => scrollToRow(row.title)}"
                    in:fly="{{ duration: 1000, delay: 40 * i, opacity: 0, y: 150 }}"
                    ><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 6.41 6.41 5 17 15.59V9h2v10H9v-2h6.59L5 6.41z" fill="var(--link-font-color)"></path>
                    </svg>
                    {row?.title}</button
                >
            {/if}
        {/each}
    </div>
{/key}

<style lang="less">
    @import "../../assets/css/variables.less";
    .siteRefs {
        margin-top: 25px;
        button {
            display: flex;
            align-items: center;
            svg {
                transform: scale(1.4);
                margin: 0.5rem 0.9rem 0.5rem 0rem;
            }
            color: var(--link-font-color);
            font-weight: 600;
        }
    }
</style>
