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

import { useEffect, useState } from 'react';
import SmallLoading from '@components/SmallLoading';

const BonusList = [
    { id: 1, icon: icon_mail, name: "MailBox", bonus: 2 },
    { id: 2, icon: icon_checkin, name: "Daily Bonus", bonus: 2 },
    { id: 3, icon: icon_help, name: "Rescue Bonus", bonus: 2 },
    { id: 4, icon: icon_7day, name: "7 Day Card", bonus: 2 },
]

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

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

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

    const handleClaimClick = () => {

    }

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


    return (
        <Popup onClose={hide} open={isShow} popupBg={bg}>
            <div className={styles.container}>
                <span>Your Balance</span>
                <span>$0.54</span>
                <p>We Missed You! Here's Your Comeback Bonus</p>
                <div className={styles.list}>
                    {
                        BonusList.map((item, index) => (
                            <div key={`comback_item_${index}`} className={styles.item}>
                                <span><img src={item.icon} /></span>
                                <span>{item.name}</span>
                                <span>${item.bonus}</span>
                                <span>Available</span>
                            </div>
                        ))
                    }
                </div>
                <button className='button-green2' onClick={handleClaimClick}>
                    {/* <SmallLoading fill='#fff' /> */}
                    Claim all
                </button>
            </div>
        </Popup >

    )
}

export default WComeBackBonus;