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;