import React from 'react';
import { useModalContext } from './context';

export interface IModalHeader {
  className?: string;
  children: any;
  closeButton?: boolean;
  [x: string]: any;
}

export const ModalHeader: React.FC<IModalHeader> = (props) => {
  const { children, className = '', closeButton = true, ...otherProps } = props;
  const { hideModal } = useModalContext();

  const handleCloseModal = () => {
    hideModal();
  };

  return (
    <div className={`b-modal-header ${className}`} {...otherProps}>
      {children}
      {closeButton && (
        <button type="button" className="b-modal-close-btn" onClick={handleCloseModal} aria-label="Close Modal">
          &times;
        </button>
      )}
    </div>
  );
};