import "./_styles.scss";

import Container from "../Container";
import Heading from "../../components/Heading";
import { closeModal } from "../../hooks/useModal";

const Modals = ({ headingTitle, className, children }) => {
  return (
    <div className={`modal__overlay ${className ? className : ""}`}>
      <Container>
        <div className="modal">
          <div className="modal__header">
            <Heading As="h3" className="modal__heading">
              {headingTitle}
            </Heading>
            <div className="modalHeader__btn">
              <span className="close" onClick={closeModal}>
                Close SVG
              </span>
            </div>
          </div>
          <div className="modal__content">{children}</div>
        </div>
      </Container>
    </div>
  );
};

export default Modals;
