import { Suspense } from "react";
import Products from "@/modules/collections/components/products";
import Banner from "@/modules/collections/components/banner";
import SamplePack from "@/modules/common/sample-pack";
import Breadcrumbs from "@/modules/common/breadcrumbs";
import categoryService from "@/lib/services/category";
import { CollectionBySlugResponse } from "@/lib/types/models";

export default async function Page({ slug }: { slug: string }) {
  const response: CollectionBySlugResponse =
    await categoryService.fetchCollectionBySlug(slug);
  const data = response?.data;


  return (
    <>
      <Breadcrumbs item={[{ name: data.name }]} />
      <Banner banner={data?.banner} name={data?.name} />
      <Products data={data?.data} />
      <Suspense fallback={<div>Loading...</div>}>
        <SamplePack />
      </Suspense>
    </>
  );
}