import InnerDetails from "@/components/Collection/InnerDetails";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import { collectionsData } from "@/pages/data/collectionsData";
import { useRouter } from "next/router";
const breadcrumbData = [
  {
    href: "/",
    label: "Collections"
  },
  {
    href: "/",
    label: "All Kitchens"
  },
  
];
   const headTitleData = [
    {
      title: "Kitchens",
      descrition1:"The Akruti Lux Collection brings together iconic brands, bespoke designs,",
      descrition2:"And architectural excellence—crafted to inspire refined living."
    }
  ];
const CategoryPage = () => {
 const router = useRouter();
  const { category } = router.query;

  if (!router.isReady) return null;

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

  if (!categoryData) {
    return <h1>Category not found</h1>;
  }

  return (
 <>
      <Breadcrumb breadcrumbData={breadcrumbData} />
      <HeadTitle headTitleData={headTitleData[0] || []} />
      <InnerDetails subCategories={categoryData.subCategories}  />
    </>

    // <div>
    //   <h1>{categoryData.categoryName}</h1>

    //   <ul>
    //     {categoryData.subCategories.map(sub => (
    //       <li key={sub.subCategorySlug}>
    //         <Link href={`/collections/${category}/${sub.subCategorySlug}`}>
    //           {sub.subCategoryName}
    //         </Link>
    //       </li>
    //     ))}
    //   </ul>
    // </div>
  );
};

export default CategoryPage;