import PropTypes from "prop-types";

import { useHeaderState } from "./hooks";

const HeaderLogo = ({ isDevPre = false, hasSearchBar }) => {
  const { closeMenus, RouterLink } = useHeaderState();
  const searchHeaderClass = hasSearchBar ? " header-logo-search" : "";
  const headerLogoClass = `header-logo${searchHeaderClass}`;
  if (isDevPre) {
    return (
      <div className={headerLogoClass}>
        <img
          className="qpp-logo"
          src="https://qpp.cms.gov/assets/images/qpp_logo_rgb_color.png"
          alt="QPP logo"
        />
      </div>
    );
  }
  if (RouterLink) {
    return (
      <RouterLink
        className={headerLogoClass}
        to="/"
        onClick={closeMenus}
        data-track-category="HeaderNav"
        data-track-action="OpenQPPHome"
        data-track-label="Quality Payment Program"
      >
        <img
          className="qpp-logo"
          src="https://qpp.cms.gov/assets/images/qpp_logo_rgb_color.png"
          alt="QPP logo"
        />
      </RouterLink>
    );
  }

  return (
    <a
      className={headerLogoClass}
      href="/"
      data-track-category="HeaderNav"
      data-track-action="OpenQPPHome"
      data-track-label="Quality Payment Program"
    >
      <img
        className="qpp-logo"
        src="https://qpp.cms.gov/assets/images/qpp_logo_rgb_color.png"
        alt="QPP logo"
      />
    </a>
  );
};

HeaderLogo.propTypes = {
  isDevPre: PropTypes.bool,
  hasSearchBar: PropTypes.bool,
};

export default HeaderLogo;