text: // import app from "../app.js";
  import app from "../app.js";
  import SearchScreen from "./SearchScreen.js";
  
  export default class Brand {
    $container;
    $brandImg;
    _item = [];
    constructor(src, _brandName) {
      this.$container = document.createElement("div");
      this.$container.setAttribute(
        "class",
        "cursor-pointer hover:border-blue-200 ml-4 w-28 h-20 border rounded-md"
      );
      this.$brandImg = document.createElement("img");
      this.$brandImg.src = src;
      this.$container.addEventListener("click", () => {
        this.goToDetailPage(_brandName);
      });
    }
    goToDetailPage = (_brandName) => {
      fetch(
        `https://61c70f1090318500175472dc.mockapi.io/brand?brandName=${_brandName}`
      )
        .then((response) => response.json())
        .then((data) => {
          app.setActiveScreen(
            new SearchScreen(
              data[0].brandName,
              data[0].brandDescription,
              data[0].brandLogo,
              data[0].image
            )
          );
        })
        .catch((err) => {
          console.log("Cannot find");
          console.log(err);
        });
    };
    render() {
      this.$container.appendChild(this.$brandImg);
  
      return this.$container;
    }
  }
  