import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { Alert, AlertTitle } from "@material-ui/lab";
import { removeAlert } from "./mainSlice";
function Messages() {
  const alerts = useSelector((state) => state.main.alerts);
  const dispatch = useDispatch();
  return alerts.map((alert, i) => {
    return (
      <Alert
        key={i}
        onClose={() => {
          dispatch(removeAlert(i));
        }}
        severity={alert.name.toLowerCase()}
      >
        <AlertTitle> {alert.name}</AlertTitle>
        {alert.message}
      </Alert>
    );
  });
}

export default Messages;