import InnerDetails from "@/components/Collection/InnerDetails";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import { getCollectionPageData } from "@/services/collectionApi";
import { getCollectionCategoryBySlug } from "@/services/collectionCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";

export default function CategoryPage({ categoryData, categoriesSub,collectionDataa }) {
 
  if (!categoryData) {
    return <h1>Category not found</h1>;
  }

  const breadcrumbData = [
    // { href: "/", label: "Home" },
    { href: "/", label: "Collections" },
    {
      href: `/collections/${categoryData.slug}`,
      label: categoryData.title,
    },
  ];

  // const headTitleData = {
  //   title: categoryData.title,
  //   descrition1: "",
  //   descrition2: "",
  // };

  return (
    <>
      <Breadcrumb breadcrumbData={breadcrumbData} />
      <HeadTitle categoryData={categoryData} />

      {categoriesSub.length > 0 && (
        <InnerDetails subCategories={categoriesSub} />
      )}
    </>
  );
}

export async function getServerSideProps({ params }) {
  try {
    const { category } = params;

    const categoryData = await getCollectionCategoryBySlug(category);
    const categoriesSub = await getCollectionSubCategoryData(category);
    // const collectionDataa = await getCollectionPageData(category);

    return {
      props: {
        categoryData,
        categoriesSub,
        // collectionDataa
      },
    };
  } catch (error) {
    return {
      props: {
        categoryData: null,
        categoriesSub: [],
        // collectionDataa:[]
      },
    };
  }
}