// ❌ Raw AI Output (looks fine, but lacks accessibility and focus-trap logic)
export function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 bg-black/50" onClick={onClose}>
      <div className="bg-white p-4">{children}</div>
    </div>
  );
}

/* -------------------------------------------------- */

// ✅ Senior Developer's Optimized Version (production-ready)
import { useEffect, useRef } from 'react';

export function Modal({ isOpen, onClose, title, children }) {
  const modalRef = useRef(null);

  // Developer adds: Close on 'Escape' key for keyboard accessibility
  useEffect(() => {
    const handleKeyDown = (e) => e.key === 'Escape' && onClose();
    if (isOpen) window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    // Developer adds: ARIA role for screen readers, and stop event bubbling
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
      onClick={onClose}
      aria-modal="true"
      role="dialog"
      aria-labelledby="modal-title"
    >
      <div
        ref={modalRef}
        className="relative bg-white p-6 rounded-xl shadow-2xl max-w-lg w-full"
        onClick={(e) => e.stopPropagation()} // Prevent closing modal when clicking inside
      >
        <h2 id="modal-title" className="sr-only">{title}</h2>
        {children}
      </div>
    </div>
  );
}