import React from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
} from '@mui/material';

interface BasicModalProps {
  open: boolean;
  title?: string;
  onClose: () => void;
  onSubmit?: () => void;
  submitText?: string;
  children?: React.ReactNode;
}

const BasicModal: React.FC<BasicModalProps> = ({
  open,
  title,
  onClose,
  onSubmit,
  submitText = 'Submit',
  children,
}) => (
  <Dialog
    open={open}
    onClose={onClose}
    aria-labelledby="basic-modal-title"
    aria-describedby="basic-modal-description"
    fullWidth
    maxWidth="sm"
  >
    {title && <DialogTitle id="basic-modal-title">{title}</DialogTitle>}
    <DialogContent dividers>
      {children}
    </DialogContent>
    <DialogActions>
      <Button color="primary" onClick={onClose}>
        Cancel
      </Button>
      {onSubmit && (
        <Button
          variant="contained"
          color="primary"
          onClick={onSubmit}
        >
          {submitText}
        </Button>
      )}
    </DialogActions>
  </Dialog>
);

export default BasicModal;