import React, { useState, FC, useEffect } from "react";
import { useRouter } from "next/router";
import styles from "./sellerFindByBrand.module.scss";
import MediaQuery from "react-responsive";
import SellerProductsByBrands from "./sellerProductsByBrands";

const SellerFindByBrand: FC<any> = (props) => {
  const brands = new Array(3).fill(null);
  const router = useRouter();
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [brandName, setBrandName] = useState<any>();
  const [sellerid, SetSellerId] = useState<any>();

  useEffect(() => {
    const Name = router?.query?.brand;

    if (Name) {
      setBrandName(Name);
    }
  }, [router]);

  return (
    <>
      <MediaQuery maxWidth={768}>
        <div
          className={styles.title_containerMobile}
          style={{ margin: "1em 1em" }}
        >
          <img
            className={styles.find_brands_img_mobile}
            src={`/images/brands/brand-Img/IMG-${brandName}.png`}
            alt={"brand-IMG"}
          />
          <div className={styles.brandTitle}> {brandName}</div>
        </div>
        <SellerProductsByBrands
          sellerData={props.sellerData}
          productHeaderTitle = {` `}
        />
      </MediaQuery>
      <MediaQuery minWidth={769}>
        <SellerProductsByBrands
          sellerData={props.sellerData}
          productHeaderTitle = {`Search results for ${brandName} in All Categories`}
        />
      </MediaQuery>
    </>
  );
};

export default SellerFindByBrand;