import React from "react";

export type ConfirmationModalProps = {
    onConfirm: () => void;
    onReject: () => void;
    confirmationText?: string;
    confirmButtonText?: string;
    rejectButtonText?: string;
};

export default function ConfirmationModal({
    onConfirm,
    onReject,
    confirmationText,
    confirmButtonText,
    rejectButtonText,
}: ConfirmationModalProps) {
    return <div className="fixed top-0 left-0 w-screen h-screen bg-gray-900/50 flex justify-center items-center z-10">
        <div className={`modal bg-white p-10 relative rounded-lg max-w-screen max-h-screen overflow-auto`}>
            <section className="modal-main flex flex-col justify-center items-center">
                <h2 className='text-light-black text-[24px] font-bold leading-[1.2] mb-[3.375rem] lg:max-w-[434px] lg:w-[100%] text-center'>
                    {confirmationText || 'Confirm?'}
                </h2>
                <button
                    type='button'
                    onClick={onConfirm}
                    className='w-[100%] border-solid border-dark-orange border-[1px] rounded-[8px] flex items-center justify-center bg-white h-[40px] text-dark-orange text-[14px] leading-[1.5] font-medium max-w-[22.75rem] lg:w-[102px] mb-[1rem]'>
                    {confirmButtonText || 'Yes'}
                </button>
                <button
                    type='button'
                    onClick={onReject}
                    className='w-[100%] border-solid border-dark-orange border-[1px] rounded-[8px] flex items-center justify-center bg-dark-orange h-[40px] text-white text-[14px] leading-[1.5] font-medium max-w-[22.75rem] lg:w-[102px]'>
                    {rejectButtonText || 'No'}
                </button>
            </section>
        </div>
    </div>
}