import useEscape from '../useEscape'

export default function Modal({ title, onClose, children }) {
  useEscape(onClose)

  return (
    <div className="modal" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h2>{title}</h2>
          <button className="lb-btn" onClick={onClose} title="Close (Esc)">
            ✕
          </button>
        </div>
        {children}
      </div>
    </div>
  )
}
