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

const { locale } = useI18n()
const { sendLog } = useAnalytics()

const analytics = {
  action_type: 'click',
  click_item: '홈으로가기',
  click_sarea: 'Home',
} as TrackingObject
</script>

<template>
  <AtomsButtonCircle
    type="internal"
    href="/home"
    background-color="rgb(0 0 0 / 0.2)"
    sr-only="home"
    class="btn-home"
    @click="sendLog(locale, analytics)"
  >
    <AtomsIconsHomeFill />
  </AtomsButtonCircle>
</template>

<style scoped>
.empty-game + main .btn-home {
  @apply mt-[var(--scroll-position,48px)] md:mt-[var(--scroll-position,64px)];
}
.btn-home {
  @apply fixed top-3 right-3 mt-[calc(var(--scroll-position,48px)+48px)] shadow-[0_1.667px_3.333px_0_rgba(0,0,0,0.06)] backdrop-blur-[12.5px] z-[100]
  sm:top-5 md:top-6 md:right-8 md:mt-[calc(var(--scroll-position,64px)+64px)];
}
.btn-home:hover :deep(.icon) {
  @apply scale-[1.08];
}
</style>
