import type { ReactNode } from 'react'

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

const Modal = ({ isOpen, onClose, children }: ModalProperties) => {
  if (!isOpen) return

  return (
    <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
      {/* Modal Container */}
      <div className="animate-fade-in relative rounded-lg bg-white p-6 shadow-lg">
        {/* Tombol Close */}
        <button
          onClick={onClose}
          className="absolute top-2 right-2 text-gray-500 hover:text-gray-800"
        >
          ✖
        </button>
        <h1>test</h1>
        {/* Modal Content */}
        {children}
      </div>
    </div>
  )
}

export default Modal