Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React from 'react'

import Button from 'react-bootstrap/Button'

import Modal from 'react-bootstrap/Modal'

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}

            >

              {LABELS.CANCEL}

            </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