ztp-next/app/components/Notification.jsx

'use client';

import { useNotification } from '../context/NotificationContext';

const Notification = () => {
    const { notification, clearNotification } = useNotification();

    if (!notification) return null;

    const notificationTypeClass = {
        success: 'alert-success',
        error: 'alert-danger',
        warning: 'alert-warning',
        info: 'alert-info',
    }[notification.type] || 'alert-info';

    return (
        <div className={`alert ${notificationTypeClass} alert-dismissible fade show`} role="alert">
            {notification.message}
            <button
                type="button"
                className="btn-close"
                aria-label="Close"
                onClick={clearNotification}
            ></button>
        </div>
    );
};

export default Notification;