import { ReactNode } from "react"

interface BackdropProps {
  isOpen: boolean
  onClose?: () => void
  children: ReactNode
}

const Backdrop = ({ isOpen, onClose, children }: BackdropProps) => {
  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 bg-black-50/70 blur-md flex items-center justify-center">
      {/* Backdrop layer */}
      <div
        className="absolute inset-0"
        onClick={onClose}
      />
      
      {/* Dialog content */}
      <div className="relative z-10">
        {children}
      </div>
    </div>
  )
}

export default Backdrop