import styles from './styles.module.scss'

function createData(deposit, amount, daily, fee, bonus) {
    return { deposit, amount, daily, fee, bonus };
}
const VipLevels = [
    createData("free", "--", "--", "--", "0.0%"),
    createData("$9", "$40", "1", "5%", "0.0%"),
    createData("$17", "$40", "1", "5%", "0.0%"),
    createData("$50", "$40", "1", "5%", "0.0%"),
    createData("$100", "$100", "2", "5%", "0.0%"),
    createData("$200", "$200", "2", "5%", "0.0%"),
    createData("$500", "$500", "3", "5%", "0.0%"),
    createData("$1,000", "$1,000", "4", "5%", "0.0%"),
    createData("$2,000", "$2,000", "5", "5%", "0.0%"),
    createData("$5,000", "$5,000", "6", "5%", "0.0%"),
    createData("$10,000", "$10,000", "8", "5%", "0.5%"),
    createData("$20,000", "$10,000", "10", "5%", "0.5%"),
    createData("$50,000", "$10,000", "10", "5%", "1.0%"),
    createData("$100,000", "$10,000", "10", "5%", "1.0%"),
    createData("$200,000", "$10,000", "10", "5%", "1.5%"),
    createData("$500,000", "$10,000", "10", "5%", "1.5%"),
    createData("$1,000,000", "$10,000", "10", "5%", "2.0%"),
    createData("$2,000,000", "$10,000", "10", "5%", "2.0%"),
    createData("$5,000,000", "$10,000", "10", "5%", "2.0%"),
];

const WVip = () => {

    const renderDesc = () => {
        return (
            <div className={styles.desc_box}>
                <p>
                    <strong>Welcome to VIP exclusivity!</strong>
                </p>
                <p>
                    <strong>Discover the benefits of being a VIP:</strong>
                </p>
                <p>
                    Top-up and become a VIP: You only need to top-up any amount to enjoy a unique gaming experience and gain access to exclusive benefits.
                </p>

                <p>
                    <span>1. Fair odds:</span> Our game odds are completely random, meaning everyone has an equal chance of winning. If you experience a losing streak, don't be discouraged. Keep enjoying the game and luck can smile on you at any time!
                </p>

                <p>
                    <span>2. Unlocked withdrawal feature:</span> Make a deposit of any amount and unlock the option to withdraw your winnings.
                </p>

                <p>
                    <span>3. Minimum withdrawal amount:</span> The minimum withdrawal limit is $40.
                </p>

                <p>
                    <span>4. VIP withdrawals:</span> By becoming VIP1, you will be able to withdraw winnings earned in the game. However, if you do not top-up, the winnings will not be included in the withdrawal amount.
                </p>

                <p>
                    <span>5. Withdrawals based on your VIP level:</span> The higher your VIP level, the higher the maximum withdrawal value and the frequency of daily withdrawals.
                </p>

                <p>
                    <span>6. Withdrawal approval process:</span> Withdrawals will be manually approved within 2-12 hours. Please be patient and enjoy your games while waiting.
                </p>

                <p>
                    <strong>Exclusive benefits for VIPs:</strong>
                </p>

                <p>
                    <span>1. Higher and more frequent withdrawals:</span> VIP members have the advantage of withdrawing higher amounts and more frequently on a daily basis.
                </p>

                <p>
                    <span>2. Daily bonuses:</span> Log in every day to receive exclusive VIP free bonuses.
                </p>

                <p>
                    <span>3. Reload discounts:</span> High-level VIPs get bigger discounts on their reloads, further enhancing their gaming experience.
                </p>

                <p>
                    <span>Enjoy VIP life at our casino:</span> With each level you reach, you will unlock a wider range of benefits and prizes. Keep leveling up and increase your chances of winning!
                </p>
            </div>
        )
    }

    const renderTable = () => {
        const oddRowBg = "#394149";
        const evenRowBg = "#2c333a";
        return (
            <div className={styles.table_box}>
                <table>
                    <thead>
                        <tr>
                            <th className={styles.th_vip}>VIP</th>
                            <th>Deposit<br />Requirements</th>
                            <th>Withdraw<br />Amount</th>
                            <th>Daily<br />Withdrawals</th>
                            <th>Withdrawal<br />Fee</th>
                            <th className={styles.th_bouns}>Bonus for single deposit over $100</th>
                        </tr>
                    </thead>

                    <tbody>
                        {VipLevels.map((vip, index) => {
                            const rowBg = index % 2 === 0 ? oddRowBg : evenRowBg;
                            return (
                                <tr key={`vip_${index}`} style={{ background: rowBg }}>
                                    <td className={styles.vip_td} style={{ background: rowBg }}>
                                        V{index}
                                    </td>
                                    <td>{vip.deposit}</td>
                                    <td>{vip.amount}</td>
                                    <td>{vip.daily}</td>
                                    <td>{vip.fee}</td>
                                    <td>{vip.bonus}</td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        )
    }


    return (
        <div className={styles.container} style={{ userSelect: 'text' }}>
            {renderDesc()}
            {renderTable()}
        </div>
    )
}


export default WVip;