<script setup lang="ts">
interface Props {
  /**
   * Function to call when pull-to-refresh is triggered
   */
  onRefresh: () => Promise<void> | void
}

const props = defineProps<Props>()

// Pull-to-refresh functionality
const { isRefreshing, pullOpacity, pullDistanceValue } = usePullToRefresh({
  onRefresh: props.onRefresh
})
</script>

<template>
  <!-- Pull-to-refresh indicator -->
  <div
    v-if="pullOpacity > 0"
    class="fixed top-20 left-0 right-0 z-50 flex justify-center items-center pointer-events-none transition-opacity duration-200"
    :style="{
      opacity: pullOpacity,
      transform: `translateY(${Math.min(pullDistanceValue, 60)}px)`
    }"
  >
    <UButton
      :icon="isRefreshing ? 'lucide:loader' : 'lucide:arrow-down'"
      variant="subtle"
      color="primary"
      size="lg"
      :class="[
        'transition-transform rounded-full',
        isRefreshing ? 'animate-spin text-primary' : 'text-muted'
      ]"
    />
  </div>
</template>
