import Notification from "./Notification";
import { Notification as NotificationType } from "./NotificationProvider";

interface NoticationsProps {
  notifications: Required<NotificationType>[];
  clearNotification: (text: string) => void;
}

const Notifications = ({
  notifications,
  clearNotification,
}: NoticationsProps) => {
  if (!notifications.length) {
    return null;
  }

  return (
    <div className="hidden fixed z-50 md:flex md:flex-col-reverse bottom-1 gap-y-2 w-96 h-full right-1 pointer-events-none">
      {notifications.map((notif) => (
        <Notification
          key={notif.text}
          notification={notif}
          clearNotification={clearNotification}
        />
      ))}
    </div>
  );
};

export default Notifications;