import { clsx } from 'clsx';

import { Size } from '../common';
import { CloseButton } from '../common/closeButton';
import FlowHeader from '../common/flowHeader';
import Logo from '../logo';

export interface OverlayHeaderProps {
  /** An Avatar */
  avatar?: React.ReactNode;
  logo?: React.ReactNode;
  /** Function called when the close is clicked */
  onClose?: React.MouseEventHandler<HTMLButtonElement>;
}

const defaultLogo = <Logo />;

export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
  return (
    <div className="np-overlay-header d-flex justify-content-center">
      <FlowHeader
        className="np-overlay-header__content p-a-3"
        leftContent={logo}
        rightContent={
          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>
            {avatar}
            {avatar && closeButton && <span className={clsx('m-x-1')} />}
            {closeButton}
          </div>
        }
      />
    </div>
  );
}