import {
    IconButton,
    DialogTitle,
    Dialog
  } from "@mui/material";
  import { styled } from "@mui/material/styles";
  import CloseIcon from "@mui/icons-material/Close";
  import PropTypes from "prop-types";

// Modal
interface BootstrapDialogTitleProps {
    children?: React.ReactNode;
    onClose: () => void;
  }
  
  export const BootstrapDialog = styled(Dialog)(({ theme }) => ({
    "& .MuiDialogContent-root": {
      padding: theme.spacing(2),
    },
    "& .MuiDialogActions-root": {
      padding: theme.spacing(1),
    },
  }));
  
  function BootstrapDialogTitle(props: BootstrapDialogTitleProps) {
    const { children, onClose, ...other } = props;
  
    return (
      <DialogTitle sx={{ m: 0, p: 2 }} {...other}>
        {children}
        {onClose ? (
          <IconButton
            aria-label="close"
            onClick={onClose}
            sx={{
              position: "absolute",
              right: 8,
              top: 8,
              color: (theme) => theme.palette.grey[500],
            }}
          >
            <CloseIcon />
          </IconButton>
        ) : null}
      </DialogTitle>
    );
  }
  
  BootstrapDialogTitle.propTypes = {
    children: PropTypes.node,
    onClose: PropTypes.func.isRequired,
  };
  // End Modal

  export default BootstrapDialog;