import React from 'react';
import { Box, Grid, Typography } from '@mui/material';
import { LoadingButton } from '@mui/lab';
import { useStyles } from './confirmationModalStyles';
import CustomModal from './Modal';

const ConfirmationModal = ({
  heading,
  bodyContent,
  bodyFunction,
  confirmationLine,
  leftButtonText,
  rightButtonText,
  onCancel,
  onConfirm,
  buttonLoading,
}) => {
  const classes = useStyles();
  return (
    <CustomModal
      showCloseButton={false}
      modalBodyFunction={() => (
        <Box>
          <Grid item xs={12}>
            <Typography variant="h4" className={classes.title}>
              {heading}
            </Typography>
          </Grid>

          <Grid className={classes.body}>
            <Typography className={classes.bodyContent}>
              {bodyContent}
            </Typography>
            {bodyFunction ? bodyFunction() : null}
          </Grid>

          <Grid className={classes.confirmationLine}>
            <p>{confirmationLine}</p>
          </Grid>

          <Grid className={classes.actionWrapper}>
            <button
              variant="contained"
              className={classes.leftButton}
              onClick={onCancel}
            >
              <span className={classes.leftButtonText}>{leftButtonText}</span>
            </button>
            <LoadingButton
              variant="contained"
              className={classes.rightButton}
              onClick={onConfirm}
              type="submit"
              loading={buttonLoading}
            >
              <span className={classes.rightButtonText}>{rightButtonText}</span>
            </LoadingButton>
          </Grid>
        </Box>
      )}
    />
  );
};

export default ConfirmationModal;
