import type { Notification } from '../../types/types';
import './Notifications.css';

type Props = {
  notifications: Notification[];
  onRemove: (id: number) => void;
  onHover: (id: number, hovering: boolean) => void;
};

export default function Notifications({ notifications, onRemove, onHover }: Props) {
  return (
    <div className="notifications">
      {notifications.map((n) => (
        <div
          key={n.id}
          className={`notification ${n.type} ${n.removing ? 'notification-out' : ''}`}
          onMouseEnter={() => onHover(n.id, true)}
          onMouseLeave={() => onHover(n.id, false)}
        >
          <span className="notification-message" title={n.message}>
            {n.message}
          </span>

          <button
            className="tab-close notification-close"
            onClick={() => onRemove(n.id)}
            aria-label="Dismiss notification"
          >
            ×
          </button>
        </div>
      ))}
    </div>
  );
}