text: import React from "react";
  import { withStyles } from "@material-ui/core/styles";
  import Dialog from "@material-ui/core/Dialog";
  import MuiDialogTitle from "@material-ui/core/DialogTitle";
  import MuiDialogContent from "@material-ui/core/DialogContent";
  import IconButton from "@material-ui/core/IconButton";
  import CloseIcon from "@material-ui/icons/Close";
  import Typography from "@material-ui/core/Typography";
  
  const styles = (theme) => ({
    root: {
      margin: 0,
      padding: theme.spacing(2),
    },
    closeButton: {
      position: "absolute",
      right: theme.spacing(1),
      top: theme.spacing(1),
      color: theme.palette.grey[500],
    },
    typoRoot: {
      marginRight: "50px",
    },
  });
  
  const DialogTitle = withStyles(styles)((props) => {
    const { children, classes, onClose, ...other } = props;
    return (
      <MuiDialogTitle disableTypography className={classes.root} {...other}>
        <Typography className={classes.typoRoot} variant="h6">
          {children}
        </Typography>
        <IconButton
          aria-label="close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      </MuiDialogTitle>
    );
  });
  
  const DialogContent = withStyles((theme) => ({
    root: {
      padding: theme.spacing(2),
    },
  }))(MuiDialogContent);
  
  const CustomizedDialogs = (props) => {
    const { open, handleClose, title, description } = props;
    return (
      <div>
        <Dialog aria-labelledby="customized-dialog-title" open={open}>
          <DialogTitle id="customized-dialog-title" onClose={handleClose}>
            {title}
          </DialogTitle>
          <DialogContent dividers>
            <Typography gutterBottom>{description}</Typography>
          </DialogContent>
        </Dialog>
      </div>
    );
  };
  
  export default CustomizedDialogs;
  