import { useQuery } from '@tanstack/vue-query'
import { unref, watch } from 'vue'
import { getProductsDetail } from '~/api/endpoints'

export const useGetProductsDetail = (productId: MaybeRef<number>) => {
  const q = useQuery({
    queryKey: ['get-products-detail', unref(productId)],
    queryFn: () => getProductsDetail(unref(productId)),
  })

  watch(() => productId, () => q.refetch())

  return q
}