import Box from "@mui/material/Box";
import Alert from "@mui/material/Alert";
import * as React from "react";
import { useEffect, useState } from "react";

export default function ErrorBox(props) {
  const { severity, msg = "" } = props;
  const [show, setShow] = useState(false);

  useEffect(() => {
    if (msg === "") {
      setShow(false);
      return;
    }
    setShow(true);
    const timeId = setTimeout(() => {
      // After 3 seconds set the show value to false
      setShow(false);
    }, 3000);

    return () => {
      clearTimeout(timeId);
    };
  }, [msg]);

  if (!show) {
    return null;
  }

  return (
    <Box
      sx={{
        display: "flex",
        width: "100%",
        justifyContent: "center",
        position: "absolute",
        mt: 6,
        zIndex: 2,
      }}
    >
      <Alert severity={severity}>{msg}</Alert>
    </Box>
  );
}
