import PropTypes from "prop-types";
import styles from "../Notification/Notification.module.css";
import { Button } from "../../Base/Buttons/Button";
import successImg from "../../../assets/success.png";
import errorImg from "../../../assets/giferror.gif";
import cn from "classnames";
import { AiOutlineLogout } from "react-icons/ai";

export const Notification = ({ title, type, msg, button, }) => {
  const selectedImage = type === "success" ? successImg : errorImg;
// const onLogout=()=>{
//   window.location.replace("/");
// }
  return (
    <>
     {/* <div className={styles.logoutButton}>
      <AiOutlineLogout onClick={onLogout}/>
        </div> */}
    <div className={styles.container}>

      <span className={styles.span}>
        <img
          src={selectedImage}
          alt={type}
          className={cn(styles.imageEffect, {
            [styles.success]: type === "success",
            [styles.error]: type === "error",
          })}
        />
      </span>
      <h2 className={styles.title}>{title}</h2>
      <p className={styles.msg}>{msg}</p>
      {button && button}
    </div>
    </>
  );
};

Notification.propTypes = {
  type: PropTypes.oneOf(["success", "error"]).isRequired,
  title: PropTypes.string.isRequired,
  msg: PropTypes.string.isRequired,
  button: PropTypes.element, 
};
