import { Alert } from '@mui/material';
import React from 'react';
import { useStyles } from './styles/formFooterMessageStyles';
import { LoadingButton } from '@mui/lab';
import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';

const FormFooterMessage = ({
  mandatoryFieldText,
  nextButtonTitle,
  nextButtonOnClick,
  isSubmitting,
}) => {
  const classes = useStyles();
  return (
    <div className={classes.allElementOuterDiv}>
      <div
        className={
          nextButtonTitle
            ? classes.alertDivWithButton
            : classes.alertDivWithoutButton
        }
      >
        <Alert
          icon={false}
          className={classes.alert}
          variant="outlined"
          severity="warning"
        >
          {mandatoryFieldText}
        </Alert>
      </div>
      {nextButtonTitle && (
        <div className={classes.nextButtonDiv}>
          <LoadingButton
            className={classes.nextButton}
            color="primary"
            variant="contained"
            onClick={nextButtonOnClick}
            loading={isSubmitting}
          >
            <CheckBoxOutlinedIcon
              className={classes.checkBoxIconForNextButton}
            />
            {nextButtonTitle}
          </LoadingButton>
        </div>
      )}
    </div>
  );
};

export default FormFooterMessage;