export default function ModalForm({isOpen, onClose, mode, onSubmit}) {
  return (
    <>
      {/* You can open the modal using document.getElementById('ID').showModal() method */}
<button className="btn" onClick={()=>document.getElementById('my_modal_3').showModal()}>open modal</button>
<dialog id="my_modal_3" className="modal" open={isOpen}>
  <div className="modal-box"
  >
    <h3 className="font-bold text-lg py-4" >{mode === 'edit' ? 'Edit Client' : 'Client Details'} </h3>
    <form method="dialog">

    <label className="input input-bordered flex items-center gap-2">

Name
  <input type="text" className="grow" placeholder="Daisy" />

  </label>
  <label className="input input-bordered flex items-center gap-2">

  Email
    <input type="text" className="grow" placeholder="Daisy" />

    </label>
    <label className="input input-bordered flex items-center gap-2">

  Job
    <input type="text" className="grow" placeholder="Daisy" />

    </label>
    <div className="flex mb-4 justify-between">
    <label className="input input-bordered flex items-center gap-2">

  Rate
    <input type="number" className="grow" placeholder="Daisy" />

    </label>

    <select defaultValue="Pick a color" className="select">
  <option>Inactive</option>
  <option>Active</option>

</select>
    </div>
      {/* if there is a button in form, it will close the modal */}
      <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onClick={onClose}>X</button>
      <button className="btn btn-success">{mode === 'edit' ? 'Save Changes' : 'Add Client'}</button>
    </form>

  </div>
</dialog>
    </>
  )
};