import ModalWrapper from "../../components/modals/ModalWrapper"
import MainBtn from "../../components/MainBtn"


export default function ViewSingleDisbursement({close}) {
  return (
    <ModalWrapper
    maxWidth='max-w-3xl'
    >
        <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
            {/* <!-- Modal header --> */}
            <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                    DISBURSEMENT DETAILS
                </h3>
                <button onClick={close} type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
                    <svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span className="sr-only">Close modal</span>
                </button>
            </div>
            {/* <!-- Modal body --> */}
            <div className="p-4 md:p-5 space-y-4 h-[400px]">
                <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    COMING SOON
                </p>
                <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    COMING SOON                
                </p>
            </div>
            {/* <!-- Modal footer --> */}
            <div className="w-full flex justify-between items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                <MainBtn onClick={close} text='Cancel' className="ring-1 ring-transparent hover:ring-red-500" />
                <MainBtn text='Proceed' className="text-white bg-primary hover:bg-primary/90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" />
            </div>
        </div>
    </ModalWrapper>
  )
}