<template>
    <button
        @click="scrollToTop"
        class="scroll-top-btn rounded-pill btn-icon btn-primary position-fixed shadow z-5 border-0"
        :class="{ 'visible': showButton, 'hidden': !showButton }"
    >
        <i class='bx bx-chevron-up'></i>
    </button>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const showButton = ref(false);

const handleScroll = () => {
    showButton.value = window.scrollY > 200;
};

const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
};

onMounted(() => {
    window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
});
</script>

