import React from 'react';
import { useNotification } from '../../contexts/NotificationContext';
import './Notification.css';

export const NotificationContainer: React.FC = () => {
    const { notifications, removeNotification } = useNotification();

    if (notifications.length === 0) return null;

    return (
        <div className="notification-container">
            {notifications.map((notification) => (
                <div
                    key={notification.id}
                    className={`notification-toast ${notification.type} ${notification.isExiting ? 'exiting' : ''}`}
                    onClick={() => removeNotification(notification.id)}
                >
                    {notification.message}
                </div>
            ))}
        </div>
    );
};
