import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import InnerDetailsBrands from "@/components/Brands/InnerDetailsBrands";
import { brandsData } from "@/pages/data/brandsData";

const BrandCategoryPage = () => {
  const router = useRouter();
  const { category } = router.query;

  if (!router.isReady) return null;

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

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

  return (
    <>
      <Breadcrumb
        breadcrumbData={[
          { href: "/brands", label: "Brands" },
          { href: router.asPath, label: categoryData.categoryName },
        ]}
      />

      <HeadTitle
        headTitleData={{
          title: categoryData.categoryName,
          descrition1: "Premium brand collections",
          descrition2: "Explore luxury sub-categories",
        }}
      />

      <InnerDetailsBrands subCategories={categoryData.subCategories} />
    </>
  );
};

export default BrandCategoryPage;