import { computed, type Ref } from 'vue'

export interface UseTableSkeletonStateOptions {
  loading: Ref<boolean>
  searchQuery?: Ref<string>
  debouncedSearchQuery?: Ref<string>
}

export function useTableSkeletonState(options: UseTableSkeletonStateOptions) {
  const { loading, searchQuery, debouncedSearchQuery } = options

  const isDebouncing = computed(() => {
    if (!searchQuery || !debouncedSearchQuery) return false
    return searchQuery.value !== debouncedSearchQuery.value
  })

  const shouldShowSkeleton = computed(() => loading.value || isDebouncing.value)

  return { isDebouncing, shouldShowSkeleton }
}