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