import React from "react";
import { ToastContainer as ReactToastContainer } from "react-toastify";
import { Close as CloseIcon } from "@material-ui/icons";
import useStyles from "./styles";

const ToastContainer = () => {
  const classes = useStyles();
  return (
    <ReactToastContainer
      className={classes.toastsContainer}
      closeButton={<CloseButton className={classes.notificationCloseButton} />}
      closeOnClick={false}
      progressClassName={classes.notificationProgress}
    />
  );
};

function CloseButton({ closeToast, className }) {
  return <CloseIcon className={className} onClick={closeToast} />;
}

export default ToastContainer;
