import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import Dialog from "@material-ui/core/Dialog";
import Divider from "@material-ui/core/Divider";
import CircularProgress from "@material-ui/core/CircularProgress";

export default function InfoDialog(props) {
  const loading = props.loading;
  const loginStyles = makeStyles((theme) => ({
    root: {
      textAlign: "center",
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
      },
    },
    closeButton: {
      color: "#bbbbbb",
      position: "absolute",
      right: theme.spacing(1),
      top: theme.spacing(1),
    },
  }));

  const styles = loginStyles();

  return (
    <Dialog className={styles.root} open={true} aria-labelledby="title">
      <DialogTitle id="title">{props.title}</DialogTitle>
      <Divider />
      <DialogContent>
        <p>{props.text}</p>
        {loading && <CircularProgress />}
      </DialogContent>
    </Dialog>
  );
}