/* global React */
const logoMarkSrc = "uploads/break-logo-mark.png";
const logoLockupSrc = "uploads/break-logo.png";

function LogoMark({ size = 44 }) {
  return <img className="logo-mark" src={logoMarkSrc} alt="" aria-hidden="true" style={{ height: size }} />;
}

function Logo({ size = 40, variant = "pine", showSub = true, onClick }) {
  const lockup = variant === "cream";
  return (
    <a href="#/" onClick={onClick} className={`logo-row${lockup ? " logo-row-lockup" : ""}`} aria-label="Break Sanduíches Búzios — início">
      {lockup ? (
        <img className="logo-lockup" src={logoLockupSrc} alt="Break Sanduíches Búzios" />
      ) : (
        <>
          <LogoMark size={size} />
          <span className="logo-copy">
            <span className="logo-word">BREAK</span>
            {showSub && <span className="logo-sub">Sanduíches Búzios</span>}
          </span>
        </>
      )}
    </a>
  );
}

Object.assign(window, { LogoMark, Logo });