import React from 'react';
import PropTypes from 'prop-types';

import { Flex } from '@ui/components';

// Style
let classes = {};
/* istanbul ignore next */
if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = require('./style.module.scss');

const ModalHeader = ({ children, className, toggleClose, ...attrs }) => (
  <header className={[classes['Modal-Header'], className || ''].join(' ')} {...attrs}>
    <Flex align="center" justify="between">
      {children}
      {toggleClose && (
        <button className={classes['Modal-Header-Close']} onClick={toggleClose} type="button">
          <i className="fa fa-times-circle" />
        </button>
      )}
    </Flex>
  </header>
);

ModalHeader.propTypes = {
  children: PropTypes.any,
  className: PropTypes.node,
  toggleClose: PropTypes.func,
};

export default ModalHeader;
