Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Box, Button, Modal, Typography, IconButton } from '@mui/material';
import Close from '@mui/icons-material/Close';

import { useAlertModal } from '@shared/hooks';

import { Card, CardActions, CardContent, CardHeader } from './card';

export function AlertModal() {
  const { show, title, message, closeAlert, onConfirm, onCancel } = useAlertModal();

  return (
    <Modal open={show} onClose={closeAlert}>
      <Box
        sx={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: '100%',
          height: '100%'
        }}
      >
        <Card styles={{ width: '100%', maxWidth: { xs: '90vw', md: '500px', lg: '800px' } }}>
          <CardHeader
            title={title}
            renderAction={() => (
              <IconButton onClick={closeAlert}>
                <Close />
              </IconButton>
            )}
          />
          <CardContent>
            <Typography variant='h2'>{message}</Typography>
          </CardContent>

          <CardActions>
            <Button variant='contained' color='primary' onClick={onConfirm}>
              Confirmar
            </Button>
            <Button variant='contained' color='primary' onClick={onCancel}>
              Cancelar
            </Button>
          </CardActions>
        </Card>
      </Box>
    </Modal>
  );
}