import { memo } from "react";

import { LOGO } from "../interfaces";
import Icon from "./Icon";

interface HeaderProps {
  appName: string;
  appLogo?: string;
  onClose: () => void;
}

function Header(props: HeaderProps) {
  const { onClose, appLogo, appName } = props;
  return (
    <div className="w3a-modal__header">
      <div className="w3a-header">
        <div>
          {appLogo && (
            <div className="w3a-header__logo">
              <img src={appLogo || LOGO} alt="" />
            </div>
          )}
          <div className="w3a-header__title">{appName}</div>
        </div>
      </div>
      <button type="button" onClick={onClose} className="w3a-header__button w3ajs-close-btn">
        <Icon iconName="close" />
      </button>
    </div>
  );
}

const memoizedHeader = memo(Header, (prevProps: HeaderProps, nextProps: HeaderProps) => {
  if (prevProps.appLogo !== nextProps.appLogo) {
    return true;
  }
  return false;
});

memoizedHeader.displayName = "Header";

export default memoizedHeader;
