<script setup lang="ts">
interface Props {
  parentRef: HTMLElement | null
  isShowTopBtn: boolean
  isShowSnsBtn: boolean
}

const { height: viewportH } = useWindowSize()

const props = withDefaults(defineProps<Props>(), {
  isShowTopBtn: false,
  isShowSnsBtn: false,
})

const parentEl = toRef(props, 'parentRef')
const { bottom: parentBottom } = useElementBounding(parentEl)

const pinToParent = computed(() => {
  if (!parentBottom.value) return false
  return parentBottom.value <= viewportH.value
})
</script>

<template>
  <div :class="['utile-container', { 'is-fixed': pinToParent }]">
    <AtomsButtonScrollTop v-if="props.isShowTopBtn" />
    <AtomsButtonSns v-if="props.isShowSnsBtn" />
  </div>
</template>

<style scoped>
.utile-container {
  @apply fixed flex flex-col
  bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
}
.utile-container.is-fixed {
  @apply absolute;
}
</style>
