import type { ReactNode } from 'react'
import { Overlay } from './Overlay'

interface ModalProps {
  open: boolean
  onClose: () => void
  title?: string
  children: ReactNode
}

export function Modal({ open, onClose, title, children }: ModalProps) {
  return (
    <Overlay
      open={open}
      onClose={onClose}
      position="center"
      className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl dark:bg-gray-900"
    >
      {title && <h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</h2>}
      {children}
    </Overlay>
  )
}