import React from "react";

export default function NotificationsModal({
  open,
  onClose,
  notificationsModalRef,
  notifications,
  filteredNotifications,
  notificationFilter,
  setNotificationFilter,
  setNotifications
}) {
  if (!open) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" ref={notificationsModalRef} onClick={(event) => event.stopPropagation()}>
        <div className="row-header">
          <h3>Уведомления</h3>
          <button type="button" className="ghost" onClick={() => setNotifications([])}>
            Очистить
          </button>
        </div>
        <div className="bell-filters">
          <button
            type="button"
            className={`chip ${notificationFilter === "all" ? "active" : ""}`}
            onClick={() => setNotificationFilter("all")}
          >
            Все
          </button>
          <button
            type="button"
            className={`chip ${notificationFilter === "error" ? "active" : ""}`}
            onClick={() => setNotificationFilter("error")}
          >
            Ошибки
          </button>
          <button
            type="button"
            className={`chip ${notificationFilter === "info" ? "active" : ""}`}
            onClick={() => setNotificationFilter("info")}
          >
            Инфо
          </button>
        </div>
        {filteredNotifications.length === 0 && <div className="empty">Пока пусто.</div>}
        {filteredNotifications.map((item) => (
          <div key={item.id} className={`notice ${item.tone}`}>
            {item.text}{item.count > 1 ? ` (x${item.count})` : ""}
          </div>
        ))}
      </div>
    </div>
  );
}
