import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import InnerDetailsSubCategory from "@/components/Collection/InnerDetailsSubCategory";
import { collectionsData } from "@/pages/data/collectionsData";

const SubCategoryPage = () => {
  const router = useRouter();
  const { category, subCategory } = router.query;

  console.log('subCategory',subCategory)
  if (!router.isReady) return null;

  const categoryData = collectionsData.find(
    item => item.categorySlug === category
  );

  const subCategoryData = categoryData?.subCategories.find(
    sub => sub.subCategorySlug === subCategory
  );
// console.log("subCategoryData666", subCategoryData)
  if (!categoryData || !subCategoryData) {
    return <h1>Sub Category not found</h1>;
  }

  const breadcrumbData = [
    { href: "/collections", label: "Collections" },
    {
      href: `/collections/${category}`,
      label: categoryData.categoryName,
    },
    {
      href: `/collections/${category}/${subCategory}`,
      label: subCategoryData.subCategoryName,
    },
  ];

  const headTitleData = {
    title: subCategoryData.subCategoryName,
    descrition1: "The Akruti Lux Collection brings together iconic brands, bespoke designs, ",
    descrition2: "and architectural excellence—crafted to inspire refined living.",
  };

  return (
    <>
      <Breadcrumb breadcrumbData={breadcrumbData} />
      <HeadTitle headTitleData={headTitleData} />
      <InnerDetailsSubCategory products={subCategoryData.products} />
    </>
  );
};

export default SubCategoryPage;