import { usePreferredReducedMotion } from '@vueuse/core'
import { computed, getCurrentInstance, onMounted, ref } from 'vue'

export const useReducedMotion = () => {
  const preference = usePreferredReducedMotion()

  const isMounted = ref(!getCurrentInstance())
  if (!isMounted.value) {
    onMounted(() => (isMounted.value = true))
  }

  return computed(() => isMounted.value && preference.value === 'reduce')
}