import Banner from "@/modules/categories/components/banner";
import Products from "@/modules/categories/components/products";
import AboutProduct from "@/modules/categories/components/about-product";
import SamplePack from "@/modules/common/sample-pack";
import ExploreByCategories from "@/modules/common/explore-by-categories";
import categoryService from "@/lib/services/category";
import { CategoryBySlugResponse } from "@/lib/types/models/category";
import { Suspense } from "react";
import { notFound } from "next/navigation";
import Breadcrumbs from "../common/breadcrumbs";

export default async function Page({ category }: { category: string }) {
  const response: CategoryBySlugResponse =
    await categoryService.fetchCategoryBySlug(category);
  const data = response?.data;
  if (!data?._id) {
    notFound();
  }


  return (
    <>
      <Breadcrumbs item={[{ name: data.name }]} />
      <Banner
        name={data?.name || ""}
        description={data?.shortDescription || ""}
        image={data?.banner || null}
      />
      <Products category={data?._id} />
      <Suspense fallback={<div>Loading...</div>}>
        <AboutProduct description={data?.description || ""} />
      </Suspense>
      <Suspense fallback={<div>Loading...</div>}>
        <SamplePack />
      </Suspense>
      <Suspense fallback={<div>Loading...</div>}>
        <ExploreByCategories
          title={"You might Also Like"}
          category={category}
        />
      </Suspense>
    </>
  );
}