import React from "react";
import { Button, Modal } from "react-bootstrap";
import { AiOutlineClose } from "react-icons/ai";
import { primary, secondary } from "../../../colors";

export const ModalHeader = ({
  title,
  icon,
  onClose,
}: {
  onClose: () => void;
  title: JSX.Element | string;
  icon?: JSX.Element;
}): React.JSX.Element => {
  return (
    <Modal.Header
      style={{
        border: "2px solid black",
        borderBottom: "none",
        backgroundColor: primary,
      }}
    >
      <Modal.Title className='w-100 d-flex' style={{ height: "fit-content" }}>
        {typeof title === "string" ? (
          <>
            {icon}
            <h2 className='m-auto p-2' style={{ textAlign: "center" }}>
              {title}
            </h2>
          </>
        ) : (
          title
        )}
        <Button
          className='ml-auto mr-0'
          style={{
            backgroundColor: secondary,
            color: "black",
            border: "2px solid black",
            width: "fit-content",
            height: "fit-content",
          }}
          onClick={onClose}
        >
          <AiOutlineClose />
        </Button>
      </Modal.Title>
    </Modal.Header>
  );
};