import React, { useEffect } from 'react';
import './HelpModal.css';

export default function HelpModal({ visible, onClose, helpContent }) {
  useEffect(() => {
    const handleEsc = (e) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, [onClose]);

  if (!visible) return null;

  const handleOverlayClick = (e) => {
    if (e.target.classList.contains('help-modal-overlay')) {
      onClose();
    }
  };

  return (
    <div className="help-modal-overlay" onClick={handleOverlayClick}>
      <div className="help-modal">
        <button className="close-btn" onClick={onClose}>×</button>
        <h2>{helpContent?.title}</h2>
        <p>{helpContent?.text}</p>
      </div>
    </div>
  );
}

