import PropTypes from "prop-types";
import { useMediaQuery } from "react-responsive";
import HeaderLogo from "./HeaderLogo";
import MenuButton from "./Buttons/MenuButton";
const Header = ({
  theme = null,
  large = false,
  showMenu = true,
  onMenuToggle = () => {},
  menuToggled = false,
}) => {
  const isLargeMobile = useMediaQuery({ maxWidth: 1200 });
  return (
    <>
      <div className={`tb-header${isLargeMobile ? " tb-header-mobile" : ""}`}>
        <HeaderLogo large={large} />

        {showMenu && (
          <MenuButton
            theme={theme}
            onToggle={onMenuToggle}
            toggled={menuToggled}
          />
        )}
      </div>
      <div className="tb-top-gradient" />
    </>
  );
};

Header.propTypes = {
  pageData: PropTypes.object,
  theme: PropTypes.shape({
    backgroundColor: PropTypes.any,
    textColor: PropTypes.any,
  }),
  large: PropTypes.bool,
  showMenu: PropTypes.bool,
  visible: PropTypes.bool,
  onMenuToggle: PropTypes.func,
  menuToggled: PropTypes.bool,
};

export default Header;