import React, { forwardRef } from "react";
import cn from "classnames";
import PropTypes from "prop-types";

export interface IModalHeaderProps {
  onClose?: () => void;
  className?: string;
  ["data-testid"]?: string;
}

const ModalHeader: React.FC<IModalHeaderProps> = forwardRef(
  (props, ref: React.Ref<HTMLDivElement>) => {
    const { onClose, children, className } = props;
    const dataTestId = props["data-testid"] || "honey-ui-modal-header";

    return (
      <div ref={ref} className={cn("modal-header", className)} data-testid={dataTestId}>
        {children}
        {onClose ? (
          <button
            className="close"
            type="button"
            onClick={onClose}
            data-testid={`${dataTestId}-close-button`}
          >
            <span aria-hidden="true">×</span>
          </button>
        ) : null}
      </div>
    );
  }
);

ModalHeader.displayName = "ModalHeader";

ModalHeader.propTypes = {
  onClose: PropTypes.func,
  className: PropTypes.string
};

export default ModalHeader;