"use client";

import { ReactNode } from 'react';

interface NotificationStackProps {
  children: ReactNode[];
}

/**
 * Container component to stack multiple notifications vertically
 */
export function NotificationStack({ children }: NotificationStackProps) {
  const notifications = Array.isArray(children) ? children.filter(Boolean) : (children ? [children] : []);
  
  if (notifications.length === 0) {
    return null;
  }

  return (
    <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-3">
      {notifications.map((notification, index) => (
        <div
          key={index}
          className="animate-in slide-in-from-top-5 duration-300"
          style={{
            animationDelay: `${index * 100}ms`,
          }}
        >
          {notification}
        </div>
      ))}
    </div>
  );
}