router-lists-ui/frontend/src/components/server/DeleteServerModal.jsx

import { useEffect, useRef } from 'react';
import { IconAlertTriangle } from '@tabler/icons-react';

/**
 * Модальное окно подтверждения удаления сервера
 */
function DeleteServerModal({ show, server, onDelete, onClose }) {
  const modalRef = useRef(null);

  useEffect(() => {
    if (window.Tabler && window.Tabler.Modal && modalRef.current) {
      const modalInstance = window.Tabler.Modal.getOrCreateInstance(modalRef.current);
      if (show) {
        modalInstance.show();
      } else {
        modalInstance.hide();
      }
      const handler = () => onClose && onClose();
      modalRef.current.addEventListener('hide.bs.modal', handler);
      return () => {
        if (modalRef.current) {
          modalRef.current.removeEventListener('hide.bs.modal', handler);
        }
      };
    }
  }, [show, onClose]);

  return (
    <div className="modal" tabIndex="-1" ref={modalRef}>
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-status bg-danger"></div>
          <div className="modal-header">
            <IconAlertTriangle className="icon text-danger me-2" size={28} />
            <h5 className="modal-title">Подтверждение удаления</h5>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div className="modal-body">
            <p>Вы уверены, что хотите удалить сервер <strong>{server?.ip}</strong>?</p>
            <p className="text-muted">Это действие нельзя отменить.</p>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
              <span className="fw-bold">Отмена</span>
            </button>
            <button type="button" className="btn btn-danger d-flex align-items-center" onClick={onDelete}>
              <span className="fw-bold">Удалить</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DeleteServerModal;