import React from "react";
import ReactDOM from "react-dom";
import Snackbar from "@mui/material/Snackbar";
import MuiAlert from "@mui/material/Alert";

export function showSnackbar(message, severity = "warning") {
  const snackbarDiv = document.createElement("div");
  document.body.appendChild(snackbarDiv);

  const handleClose = () => {
    ReactDOM.unmountComponentAtNode(snackbarDiv);
    document.body.removeChild(snackbarDiv);
  };

  ReactDOM.render(
    <Snackbar open autoHideDuration={6000} onClose={handleClose}>
      <MuiAlert
        onClose={handleClose}
        severity={severity}
        sx={{ width: "100%" }}
      >
        {message}
      </MuiAlert>
    </Snackbar>,
    snackbarDiv
  );
}
