import { fetchQuery } from "convex/nextjs";
import { notFound } from "next/navigation";
import { api } from "../../../../../../convex/_generated/api";
import { ProductDetailHeroSection } from "./ProductDetailHeroSection";

type ProductDetailHeroSectionWrapperProps = {
  category: string;
  subCategory: string;
  slug: string;
};

/**
 * Async server component: fetches product by slug and renders the hero section.
 * Used inside Suspense so the hero can show ProductDetailHeroSkeleton while loading.
 */
export async function ProductDetailHeroSectionWrapper({
  category,
  subCategory,
  slug,
}: ProductDetailHeroSectionWrapperProps) {
  const product = await fetchQuery(api.products.getBySlug, { slug });
  if (!product) notFound();

  return (
    <ProductDetailHeroSection
      product={product}
      category={category}
      subCategory={subCategory}
    />
  );
}
