import { GET_PRODUCT_BY_SLUG } from '~/graphql/queries/standalone/products';
import type { IProduct, IProductResponse } from '~/types';

export async function useProductBySlug(slug: string) {
  const product = useState<IProduct | null>('currentProduct', () => null);

  const { data, error } = await useAsyncQuery<IProductResponse>(
    GET_PRODUCT_BY_SLUG,
    { slug }
  );

  const result = data.value?.products?.edges[0]?.node ?? null;
  if (result) {
    product.value = result;
  }

  watch(error, (err) => {
    if (err) {
      console.error('useProductBySlug error:', err);
    }
  });

  return {
    product,
    seoMeta: computed(() => product.value?.seoMeta)
  };
}