import { type ReactNode, useEffect } from 'react'

export interface ModalProps {
  children?: ReactNode
  onClose: () => void
}

// 공통 모달: 반투명 배경 + 배경 클릭/ESC 로 닫기.
export function Modal({ children, onClose }: ModalProps) {
  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (e.target === e.currentTarget) onClose()
  }

  useEffect(() => {
    const handleEscKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    document.addEventListener('keydown', handleEscKey)
    return () => document.removeEventListener('keydown', handleEscKey)
  }, [onClose])

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(0,0,0,0.40)]"
      onClick={handleBackdropClick}
    >
      {children}
    </div>
  )
}