import { Suspense } from "react";
import type { Id } from "../../../../../convex/_generated/dataModel";
import { ProductDetailRelatedSection } from "./sections/ProductDetailRelatedSection";
import { ProductDetailSectionsWrapper } from "./sections/ProductDetailSectionsWrapper";
import { ProductDetailHeroSkeleton } from "./state/ProductDetailHeroSkeleton";
import { ProductDetailRelatedSkeleton } from "./state/ProductDetailRelatedSkeleton";

type ProductDetailContentProps = {
  category: string;
  subCategory: string;
  slug: string;
  categoryId: Id<"categories">;
};

/**
 * Composes PDP sections: Hero + Tabs (Description, Details, Reviews) → Related.
 * Reviews stream independently via a nested Suspense inside the tabs wrapper.
 */
export function ProductDetailContent({
  category,
  subCategory,
  slug,
  categoryId,
}: ProductDetailContentProps) {
  return (
    <main className="mx-auto w-full max-w-7xl px-4 py-6 md:py-8">
      <Suspense fallback={<ProductDetailHeroSkeleton />}>
        <ProductDetailSectionsWrapper
          category={category}
          subCategory={subCategory}
          slug={slug}
        />
      </Suspense>
      <Suspense fallback={<ProductDetailRelatedSkeleton />}>
        <ProductDetailRelatedSection categoryId={categoryId} slug={slug} />
      </Suspense>
    </main>
  );
}
