import React from "react";
import { Snackbar, Alert, AlertProps, SnackbarProps } from "@mui/material";

export interface MessageBoxProps {
  type: AlertProps["severity"];
  anchorOrigin?: SnackbarProps["anchorOrigin"];
  duration?: number;
}

const MessageBox: React.FC<MessageBoxProps> = ({
  type,
  duration = 4000,
  anchorOrigin = { vertical:'top', horizontal:'right' },
  children,
}) => {
  const [open, setOpen] = React.useState(true);

  const handleClose = (
    event?: React.SyntheticEvent | Event,
    reason?: string
  ) => {
    if (reason === "clickaway") {
      return;
    }

    setOpen(false);
  };
  return (
    <Snackbar open={open} autoHideDuration={duration} anchorOrigin={anchorOrigin} onClose={handleClose}>
      <Alert onClose={handleClose} severity={type}>
        {children}
      </Alert>
    </Snackbar>
  );
};

export default MessageBox;
