import styles from "./styles.module.scss";
import SvgIcon from "@components/SvgIcon";
import {ReactComponent as Video} from '@assets/singlesvg/video.svg';
import {useSelector} from "react-redux";
import {getUserInfo, isLogined} from "@features/mainSlice";
import USD from "@assets/lvicon/USD.black.png";
import {numFormatter} from "@utils/helpers";
const i18n=global.i18n;
const DepositHeader=({...props})=>{
    const route=props.route;
    const close=props.close;
    const user=useSelector(getUserInfo);
    const isLogin=useSelector(isLogined);
    const renderHeader=()=>{
        let title=route?route.title:"";
        return (
            <div className={styles.header}>
                <div className={styles.hcontent}>
                    {i18n.t(title)}
                </div>
                <div className={styles.top}>
                    <div className={styles.left}>
                        <button className={styles.close} onClick={()=>{
                            close();
                        }}>
                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
                        </button>
                        {
                           !isLogin?(<></>):(
                               <div className={styles.user}>
                                   <div className={styles.uid}>{i18n.t("deposit.uid")+""+user.UserID}</div>
                                   <div className={styles.gold_con}>
                                       <img className={styles.icon_golds} src={USD}/>
                                       <div className={styles.golds}>{global.DOLLAR+""+numFormatter(user.Score)}</div>
                                   </div>
                               </div>
                           )
                        }
                    </div>
                    <div className={styles.right}>
                        <button className={styles.right_btn}>
                            <Video className={styles.icon}/>
                        </button>
                        <button className={styles.right_btn}>
                            <SvgIcon className={styles.icon} herf={"icon_History"}/>
                        </button>
                    </div>
                </div>
            </div>
        )
    }
    return (
       <div id={props.id} className={props.className}>
           {renderHeader()}
       </div>
    )
}
export default DepositHeader;