import { useRef } from "react"
import WithModal from "@/Components/WithModal"

const ConfirmationModal = ({ id, action, form, handleSubmit }) => {
  const backButtonRef = useRef()
  const { processing } = form

  return (
    <WithModal type={id} backdrop={true} size="max-w-md" boxClassName='modal-box'>
      <div className="flex flex-col gap-4">
        <h3 className="font-bold text-lg">Konfirmasi Simpan</h3>
        <p className="text-sm text-gray-500">Apakah anda yakin ingin menyimpan data realisasi ini?</p>

        <div className="modal-action">
          <label ref={backButtonRef} htmlFor={`modal_${id}`} className="btn btn-sm btn-ghost">Batal</label>
          <button
            onClick={() => handleSubmit(() => backButtonRef.current?.click())}
            className="btn btn-sm btn-primary"
            disabled={processing}
          >
            {processing && <span className="loading loading-spinner loading-xs"></span>}
            Ya, Simpan
          </button>
        </div>
      </div>
    </WithModal>
  )
}

export default ConfirmationModal
