import Popup from '@components/Popup';
import styles from './styles.module.scss';
import bg from "@assets/come_back/bg.webp";

import { useEffect, useState } from 'react'

const WRecallGift = () => {
    const [isShow, setIsShow] = useState(false);


    const show = () => {
        setIsShow(true);
    }

    const hide = () => {
        setIsShow(false);
    }

    const handleCloseClick = () => {
        hide();
        global.openNextPopup();
    }

    const handleDepositClick = () => {
        // navigate(ROUTE_PATH.DEPOSIT);
        // global.clearPopupFlow();
        // hide();
    }

    const handleDetailsClick = () => {

    }

    useEffect(() => {
        const recallGift = {
            show,
            hide: handleCloseClick,
        }

        global.recallGift = recallGift;
    }, [])

    useEffect(() => {
        const comebackWithdraw = {
            show, hide
        }
        global.comebackWithdraw = comebackWithdraw;
    }, [])


    return (
        <Popup onClose={handleCloseClick} open={isShow} popupBg={bg}>
            <div className={styles.container}>
                <span>
                    Dear DennyHubby
                </span>

                <span>
                    YOUR VIP LOYALTY<br />
                    REWARD $76 AWAITS!
                </span>

                <div className={styles.content}>
                    <span>1. To thank you for being our loyal player, claim arare 320% bonus!</span>
                    <span>2.DEPOSIT S19 → TOTAL! GET $57<br /> EXTRA = $76 TOTAL</span>
                    <span>3. HURRY! - EXPIRES IN: [02:00:00]</span>
                </div>
                <button className='button-green2' onClick={handleDepositClick}>
                    {/* <SmallLoading fill='#fff' /> */}
                    $19.99
                </button>

                <button onClick={handleDetailsClick}>Bonus Details</button>
            </div>
        </Popup >

    )
}

export default WRecallGift;