import type { UseFetchOptions } from "nuxt/app";

export async function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>
) {
  const prexFixUrlWithApiName = import.meta.env.VITE_API_NAME + url;

  return await useFetch(prexFixUrlWithApiName, {
    ...options,
    $fetch: useNuxtApp().$api,
  });

  // when setting lazy:true, we can use pending.
  // const { data, error, pending } = useFetch(url, {
  // lazy: true,
  // });
  // const { data, error, pending } = useLazyFetch(url);
  // const { data, error, pending } = useLazyAsyncData(url);
}

// $fetch : very similar like fetch command.
// we can use it on client and server the same way.

// useAsyncData : it does the same thing on the clien and server.
// it let us use async data.  data that we need to wait to resolced.
// export const useApi2 = async (url, options) => {
// return await useAsyncData(() => $fetch(url));
// };