<script setup lang="ts">
const { y: windowY } = useWindowScroll({ behavior: 'smooth' })

const showBtn = computed(() => windowY.value > 0)

const handleScrollToTop = () => {
  windowY.value = 0
}
</script>

<template>
  <Transition name="fade">
    <AtomsButtonCircle
      v-show="showBtn"
      class="btn-top"
      sr-only="top"
      @click="handleScrollToTop"
    />
  </Transition>
</template>

<style scoped>
.btn-top {
  @apply bg-[image:var(--button-top)] bg-center bg-cover bg-no-repeat;
}
</style>
