Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from "react";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import styled from "styled-components";
import Spinner from "../loading-spinner/Spinner";
import "../../css/shared/global.scss";

const StyledModalBody = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 1rem;
`;

const StyledModal = styled.div`
  .modal {
    width: 200px;
  }
`;

const ConfirmModal = (props) => {
  // props destructuring
  const {
    show,
    onClose,
    title = "¿Estás seguro?",
    loading,
    onAccept,
    message,
    acceptLabel = "Enviar",
  } = props;

  return (
    <StyledModal>
      <Modal
        size="sm"
        show={show}
        onHide={onClose}
        style={{ overflowY: "scroll" }}
      >
        <Modal.Header closeButton>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {message && message}
          <StyledModalBody>
            <Button
              size="lg"
              onClick={onClose}
            >
              Cancelar
            </Button>
            <Button size="lg" type="submit" onClick={onAccept}>
              {acceptLabel}
            </Button>
          </StyledModalBody>
        </Modal.Body>
        {loading &&
          <div className="spinner-container">
            <Spinner />
          </div>
        }
      </Modal>
    </StyledModal>
  );
};

export default ConfirmModal;