import styles from "./styles.module.scss";
import SvgIcon from "@components/SvgIcon";
import {useState} from "react";
import Popup from "@components/Popup";
import help_img from "@assets/pay/mx/mxdrule.png";
const i18n=global.i18n;
const MXHeaderRight=()=>{
    const [showHelp,setShowHelp]=useState(false);
    const renderHelp=()=>{
        return (
            <Popup onClose={()=>{
                setShowHelp(false);
            }} open={showHelp} popupClass={styles.mx_help_con}>
                <div className={styles.mx_help}>
                    <div className={styles.title}>
                        <span>{i18n.t("deposit.order_info_mx.title_help")}</span>
                    </div>
                    <div className={styles.h_img}>
                        <img src={help_img}/>
                    </div>
                </div>
            </Popup>
        )
    }
    return (
        <div className={styles.mx_right}>
            <button className={styles.right_btn} onClick={() => {
                setShowHelp(true);
            }}>
                <SvgIcon className={styles.icon} herf={"icon_Help"}/>
            </button>
            {renderHelp()}
        </div>
    )
}
export default MXHeaderRight;