<script>
    import { onMount, onDestroy } from "svelte"

    let showButton = false

    const checkScroll = () => {
        // Change the visibility of the button based on the scroll position
        showButton = window.pageYOffset > 200
    }

    const scrollToTop = () => {
        // Scroll smoothly to the top
        window.scrollTo({ top: 0, behavior: "smooth" })
    }

    onMount(() => {
        // Attach scroll event listener when component is mounted
        window.addEventListener("scroll", checkScroll)
    })

    onDestroy(() => {
        // Remove scroll event listener when component is destroyed
        window.removeEventListener("scroll", checkScroll)
    })
</script>

{#if showButton}
    <button on:click="{scrollToTop}" class="arrow-up">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z" fill="var(--background-color)"
            ></path>
        </svg></button
    >
{/if}

<style lang="less">
    @import "../../assets/css/variables.less";
    .arrow-up {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 10px;
        right: 10px;
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
        z-index: 1000;
        background-color: var(--link-font-color);
        svg {
            transform-origin: center;
        }
    }
</style>
