import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon';
import Button from '../../Button';

import './header.scss';

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  /** @ignore */
  children: PropTypes.node,
  title: PropTypes.string,
  onClose: PropTypes.func,
  logo: PropTypes.string
};

const defaultProps = {
  className: undefined,
  children: null,
  title: null,
  onClose: null,
  logo: ''
};

const ModalHeader = ({ className, onClose = false, children, logo, title, ...rest }) => (
  <div className={className} styleName="modal-header" {...rest}>
    {!!logo && <img styleName="modal-header--logo" alt="" src={logo} />}
    {(children || title) && <h2 styleName="modal-header--title">{children || title}</h2>}
    {onClose
      && <Button
        variant="icon"
        styleName="modal-header--close"
        title="close"
        onClick={onClose}
      >
        <Icon name="close" />
      </Button>}
  </div>
);

ModalHeader.propTypes = propTypes;
ModalHeader.defaultProps = defaultProps;

export default ModalHeader;
