import React from 'react';
import { useUIContext } from '../../../context/UIContext/useUIContext';
import './NotificationDisplay.css';

/**
 * Displays the current notification message from UIContext.
 */
export const NotificationDisplay: React.FC = () => {
  const { warningMessage, clearWarningMessage } = useUIContext();

  if (!warningMessage) {
    return null;
  }

  const { text, type, id } = warningMessage;

  return (
    <div className={`notification-display notification-${type}`}>
      <span className="notification-text">{text}</span>
      {/* Add a close button only for persistent errors? */}
      {type === 'error' && (
        <button
          className="notification-close-button"
          onClick={clearWarningMessage}
          aria-label="Close notification"
        >
          &times;
        </button>
      )}
    </div>
  );
};

export default NotificationDisplay;