import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import { brandsData } from "@/components/data/brandsData";
import InnerBannerBrands from "@/components/Brands/InnerBannerBrands";
import AboutInfoBrands from "@/components/Brands/AboutInfoBrands";
import Video from "@/components/Brands/Video";
import TechnicalDetails from "@/components/Brands/TechnicalDetails";
import Gallery from "@/components/Collection/Gallery";
import Explore from "@/components/Brands/Explore";
import { Contact } from "@/container/Home/Contact";

const BrandDetailsPage = () => {
  const router = useRouter();
  const { category, slug } = router.query;

  if (!router.isReady) return null;

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

  const subCategoryData = categoryData?.subCategories.find(
    sub => sub.subCategorySlug === slug
  );

  if (!categoryData || !subCategoryData) {
    return <h1>Details not found</h1>;
  }
  const breadcrumbData=[
          { href: "/brands", label: "Brands" },
          { href: `/brands/${category}`, label: categoryData.categoryName },
          { href: router.asPath, label: subCategoryData.subCategoryName },
        ]
  return (
    <>
      <Breadcrumb breadcrumbData={breadcrumbData} />
      <InnerBannerBrands subCategoryData={subCategoryData || []} />
      <AboutInfoBrands />
      <Video />
      <TechnicalDetails />
      <Gallery />
      <Explore />
      <Contact />

      {/* <h1>{subCategoryData.subCategoryName}</h1>

      <img
        src={subCategoryData.subCategoryImage}
        alt={subCategoryData.subCategoryName}
        style={{ maxWidth: "400px" }}
      /> */}
    </>
  );
};

export default BrandDetailsPage;