"use client";

import {
  resetNotification,
  selectNotification,
} from "@/utils/store/features/ui/notification.slice";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import styles from "@/components/ui/Notification/notification.module.css";
import { AnimatePresence, motion } from "framer-motion";
import { Geist } from "next/font/google";

import { HiBellAlert } from "react-icons/hi2";
import { TbAlertTriangleFilled } from "react-icons/tb";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const Notification = () => {
  const dispatch = useDispatch();
  const notification = useSelector(selectNotification);

  useEffect(() => {
    if (notification.timeout) {
      setTimeout(() => {
        dispatch(resetNotification());
      }, notification.timeout);
    }
  }, [dispatch, notification]);

  return (
    <AnimatePresence>
      {notification.status && (
        <div className={styles.notification_container}>
          <motion.div
            initial={{ y: 10, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: -10, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className={`${styles.notification} ${geistSans.variable} ${
              styles[notification.type]
            }`}>
            <div className={styles.icon}>
              {notification.type === "error" ? (
                <TbAlertTriangleFilled />
              ) : (
                <HiBellAlert />
              )}
            </div>
            <p>{notification.message}</p>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
};

export default Notification;
