import React, {useState} from 'react';
import Modal from '../../components/core/Modal';
import { translate } from '../../Helper';

function Footer({ onReset, handleSave }) {
    const [isOpen, setIsOpen] = useState(false);

    const handleToggleModal = () => {
        setIsOpen(!isOpen);
    };

    return (
        <>
            <div className="ecre-sticky ecre-bottom-0 -ecre-mx-5 md:-ecre-mx-8 -ecre-mb-7 ecre-flex ecre-flex-wrap ecre-gap-x-2 md:ecre-gap-x-4 ecre-gap-y-2 ecre-justify-end ecre-px-5 md:ecre-px-[47px] ecre-py-4 md:ecre-py-[26px] ecre-bg-[#EFF6FF]">
                <button className="ecre-text-red-500 ecre-cursor-pointer ecre-text-xs sm:ecre-text-sm ecre-font-semibold ecre-px-3 md:ecre-px-4 ecre-py-2 md:ecre-py-3 ecre-bg-white ecre-rounded-lg ecre-border ecre-border-solid ecre-border-red-400 ecre-transition hover:ecre-text-white hover:ecre-bg-red-400" onClick={handleToggleModal}>
                   {translate('discard_changes')}
                </button>
                <button className="ecre-text-white ecre-cursor-pointer ecre-text-xs sm:ecre-text-sm ecre-font-semibold ecre-px-3 md:ecre-px-4 ecre-py-2 md:ecre-py-3 ecre-bg-[#6a40d5] ecre-rounded-lg ecre-border ecre-border-solid ecre-border-[#6a40d5] ecre-transition hover:ecre-border-violet-800 hover:ecre-bg-violet-800" onClick={handleSave}>
                    {translate('save_changes')}
                </button>
            </div>

            <Modal openModal={isOpen} toggleModal={handleToggleModal}>
                {{
                header: <div className="title ecre-text-gray-900 ecre-text-base ecre-font-semibold">{translate('discard_all_changes')}</div>,
                body: <p className="ecre-text-gray-900 ecre-text-sm ecre-font-normal">{translate('discard_warning')}</p>,
                footer: (
                    <div className="btn-box ecre-justify-end ecre-items-center ecre-gap-2 ecre-flex">
                        <button onClick={handleToggleModal} className="ecre-text-gray-900 ecre-cursor-pointer ecre-text-sm ecre-font-semibold ecre-px-4 ecre-py-2.5 ecre-transition ecre-bg-slate-100 ecre-rounded-lg ecre-border ecre-border-solid ecre-border-slate-100 hover:ecre-border-red-500 hover:ecre-bg-white hover:ecre-text-red-500"> {translate('cancel')}</button>
                        <button onClick={onReset} className="ecre-text-white ecre-cursor-pointer ecre-text-sm ecre-font-semibold ecre-px-4 ecre-py-2.5 ecre-transition ecre-border ecre-border-solid ecre-border-red-500 ecre-bg-red-500 ecre-rounded-lg hover:ecre-bg-white hover:ecre-text-red-500">{translate('yes_discard_changes')}</button>
                    </div>
                )
                }}
            </Modal>
        
        </>

        
    );
}

export default Footer;