import React, { FC } from "react";
import PropTypes from "prop-types";
import { Breadcrumb } from "antd";
import styles from "./shopByBrandHeader.module.scss";
import MediaQuery from "react-responsive";
import { LeftOutlined } from "@ant-design/icons";
import { baseUrl } from "../../../../constants/urls";

const shopByBrandHeader: FC<any> = (props) => {
  console.log(`${baseUrl}/${props.brandLogo}`);
  
  return (
    <>
      <MediaQuery maxWidth={768}>
        <div className={styles.breadcrumbMobile} style={{ marginTop: "10em" }}>
          <a href="/home">
            <LeftOutlined className={styles.iconLeftDisplay} />
          </a>

          <div className={styles.brandImgTitle}>
            <img
              src={`${baseUrl}/${props.brandLogo}`}
              alt={"brand-IMG"}
              className={styles.brandImg}
            />
            <div className={styles.brandTitle}> {props.brandName}</div>
          </div>
        </div>
      </MediaQuery>

      <MediaQuery minWidth={769}>
        <div className={styles.breadcrumb}>
          <div>
            {/* <Breadcrumb separator=">">
              <Breadcrumb.Item href="/home">Home</Breadcrumb.Item>
              <Breadcrumb.Item>Brand</Breadcrumb.Item>
            </Breadcrumb> */}
          </div>
          <div className={styles.brandImgTitle}>
            <img
              src={`${baseUrl}/${props.brandLogo}`}
              alt={"brand-IMG"}
              className={styles.brandImg}
            />
            <div className={styles.brandTitle}> {props.brandName}</div>
          </div>
        </div>
      </MediaQuery>
    </>
  );
};

export default shopByBrandHeader;