import './alert-modal.css';

import Modal, { ModalType } from '../modal/modal';
import ModalOverlay, { ModalOverlayType } from '../modal-overlay/modal-overlay';

type Props = {
  title: string;
  onClose: () => void;
  children: React.ReactNode;
};

export default function AlertModal(props: Props) {
  return (
    <ModalOverlay type={ModalOverlayType.Dark} className="alert-modal" onClick={props.onClose}>
      <Modal type={ModalType.Error} onClose={props.onClose}>
        <h3 className="alert-modal__title">{props.title}</h3>

        {props.children}
      </Modal>
    </ModalOverlay>
  );
}