import type { FC, HTMLAttributes, MouseEventHandler } from 'react';
import classnames from 'classnames';
import React from 'react';

export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
  toggle: MouseEventHandler;
}

const ModalHeader: FC<ModalHeaderProps> = ({ children, className, toggle, ...props }) => (
  <div className={classnames('modal-header', className)} data-testid="ModalHeader" {...props}>
    {children}
    <button aria-label="Close button" type="button" className="modal-close-button p-10 btn btn-link" onClick={toggle} />
  </div>
);

export default ModalHeader;