<script setup lang="ts">
import type { TrackingObject } from '#layers/types/api/common'

const { locale } = useI18n()
const { y: windowY } = useWindowScroll({ behavior: 'smooth' })
const { sendLog } = useAnalytics()

const analytics = {
  action_type: 'click',
  click_item: 'TOP버튼',
  click_sarea: 'TOP',
} as TrackingObject

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

const handleScrollToTop = () => {
  windowY.value = 0
  sendLog(locale.value, analytics)
}
</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>
