import { FC } from "react";
import Modal from "react-modal";
import { GoX } from "react-icons/go";
import { ModalWindowProps } from "./Modal.interface";
import Button from "../button/Button";
import "./Modal.scss";

const customStyles = {
  content: {
    top: "40%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    transform: "translate(-50%, -50%)",
    borderRadius: "15px",
    width: "600px",
  },
};

const ModalWindow: FC<ModalWindowProps> = ({ isOpen, closeModal, children, label = "" }) => {
  return (
    <Modal style={customStyles} isOpen={isOpen} onRequestClose={closeModal}>
      <div className="modal-content">
        <div className="label">
          <h3 className="name">{label}</h3>
          <Button onClick={closeModal} icon={<GoX style={{ height: "25px", width: "25px" }} />} buttonType="link" />
        </div>
        {children}
      </div>
    </Modal>
  );
};

export default ModalWindow;