import React from 'react';
import ActionModal from "./ActionModal";
// import helperIcon from "../../../../assets/images/helper-icon.svg";
import FormButtonsContainer from "../../Forms/FormButton/FormButtonsContainer";
import FormButtonCancel from "../../Forms/FormButton/FormButtonCancel";
import FormButtonSubmit from "../../Forms/FormButton/FormButtonSubmit";
import parse from "html-react-parser";
import Govoulis from "../../../SVG/Govoulis";

type ConfirmationModalProps = {
    children?: React.ReactNode
    onClose: () => void
    title: string
    text: string
    desc?: string
    modalAction: () => void
    loading?: boolean
    className?:string
    isDisabled?: boolean
    FormButtonCancelText?:string
    FormButtonSubmitText?:string
    jokerProp?:any
}
const ConfirmationModal = ({children, title, text, onClose, jokerProp, modalAction, loading=false, className,isDisabled,FormButtonCancelText='ΟΧΙ',FormButtonSubmitText='ΝΑΙ'}: ConfirmationModalProps) => {
    return (
        <ActionModal onClose={onClose} customClass={`confirmation-modal ` + className}>
            <div className='confirmation-modal--image-container'>
                <Govoulis
                    colorWhite={'var(--white)'}
                    colorBlue={'var(--secondary-color)'}/>
            </div>
            <h4 className={'confirmation-modal--title'}>{title}</h4>
            <p className={'confirmation-modal--text'}>
                {parse(text)}
            </p>
            <div>
                {children}
            </div>
            {!jokerProp &&
                <div className='action-modal--btn-container'>
                    <FormButtonsContainer justify={'center'} align={''}>
                        <FormButtonCancel onClick={onClose} buttonType={'button'}>
                            <p>{FormButtonCancelText}</p>
                        </FormButtonCancel>
                        <FormButtonSubmit disabled={isDisabled} onClick={() => modalAction()}  buttonType={'submit'}
                                          loading={loading}>
                            <p>{FormButtonSubmitText}</p>
                        </FormButtonSubmit>
                    </FormButtonsContainer>
                </div>}
        </ActionModal>
    );
}
export default ConfirmationModal;