'use client'

import { ReactNode, useEffect } from 'react'

export function Modal({ children, onClose }: { children: ReactNode; onClose: () => void }) {
  // Закрыть по Escape
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
    document.addEventListener('keyup', onKey)
    return () => document.removeEventListener('keyup', onKey)
  }, [onClose])

  return (
    <>
      <div
        className="modal fade show"
        style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}
        onClick={onClose}
      >
        <div className="modal-dialog" onClick={(e) => e.stopPropagation()}>
          <div className="modal-content p-3">
            {children}
          </div>
        </div>
      </div>
      <div className="modal-backdrop fade show" />
    </>
  )
}
