import type { ReactNode } from 'react'

interface ModalProps {
  title: string
  onClose: () => void
  width?: number
  children: ReactNode
  footer?: ReactNode
}

export default function Modal({ title, onClose, width = 520, children, footer }: ModalProps): React.JSX.Element {
  return (
    <div
      className="modal-overlay"
      onMouseDown={(e) => {
        if (e.target === e.currentTarget) onClose()
      }}
    >
      <div className="modal" style={{ width }}>
        <div className="modal-head">
          <span className="modal-title">{title}</span>
          <button className="modal-x" title="关闭" onClick={onClose}>
            ✕
          </button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  )
}
