<template>
  <div
    class="pull-indicator fixed left-1/2 -translate-x-1/2 z-50 transition-all duration-200"
    :style="{ top: `${Math.max(pullDistance - 40, -40)}px`, opacity: pullDistance / threshold }"
  >
    <div
      class="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center"
      :class="{ 'animate-spin': isRefreshing }"
    >
      <i
        class="pi text-neutral-600"
        :class="isRefreshing ? 'pi-spinner' : (pullDistance >= threshold ? 'pi-check' : 'pi-arrow-down')"
      ></i>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  refresh: []
}>()

const { pullDistance, isRefreshing, threshold } = usePullToRefresh(async () => {
  emit('refresh')
})
</script>
