import React from "react";
import PropTypes from "prop-types";
import { List } from "immutable";
import { useSelector } from "react-redux";

import { Notification } from "./notification";

export const Notifications = () => {
  const notifications = useSelector((state) => state.notifications);
  return (
    <div className="notifications">
      {notifications.map((el) => (
        <Notification
          key={el.get("id")}
          id={el.get("id")}
          icon={el.get("icon", "video-camera")}
          title={el.get("title", "Notification")}
          message={el.get("message")}
          autohide={el.get("autohide", true)}
          delay={el.get("delay", 10000)}
          imageUrl={el.get("imageUrl")}
        />
      ))}
    </div>
  );
};
Notifications.propTypes = {
  notifications: PropTypes.instanceOf(List),
};