import Icons from "../Helpers/Icons";
import bank1 from "../../assets/images/bank-1.png";
import bank2 from "../../assets/images/bank-2.png";
import bank3 from "../../assets/images/bank-3.png";
import bank4 from "../../assets/images/bank-4.png";

export default function WalletHeader(props) {
   // debugger;
    return (
        <>
            <div
                className="lg:flex hidden user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple pr-1.5 pl-4">
                <div
                    onClick={() => props.handlerBalance()}
                    className="flex items-center lg:justify-between justify-center w-full h-full"
                >
                <span className="lg:block hidden">
                  <Icons name="wallet"/>
                </span>
                    <p className="lg:text-xl text-lg font-bold text-white">
                        $ 234,435.34
                    </p>
                    <span className="lg:block hidden">
                  <Icons name="deep-plus"/>
                </span>
                </div>
                <div
                    className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white   absolute -left-24 rounded-lg cursor-pointer ${
                        props.balanceDropdown ? "active" : ""
                    }`}
                >
                    <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-6">
                        <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
                            Your Balance
                        </h3>
                    </div>
                    <div className="content px-7 pb-7">
                        <ul>
                            <li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
                                <div className="sm:flex justify-between items-center">
                                    <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
                                        <div
                                            className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
                                            <img src={bank1} alt=""/>
                                        </div>
                                        <div className="name">
                                            <p className="text-base text-dark-gray dark:text-white font-medium">
                                                MetaMask
                                            </p>
                                        </div>
                                    </div>
                                    <div>
                                        <p className="eth text-xl font-bold text-purple">
                                            75,320 ETH
                                        </p>
                                        <p className="usd text-base text-thin-light-gray text-right">
                                            (773.69 USD)
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
                                <div className="sm:flex justify-between items-center">
                                    <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
                                        <div
                                            className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
                                            <img src={bank2} alt=""/>
                                        </div>
                                        <div className="name">
                                            <p className="text-base text-dark-gray dark:text-white font-medium">
                                                Coinbase Wallet
                                            </p>
                                        </div>
                                    </div>
                                    <div>
                                        <p className="eth text-xl font-bold text-purple">
                                            56,124 ETH
                                        </p>
                                        <p className="usd text-base text-thin-light-gray text-right">
                                            (773.69 USD)
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
                                <div className="sm:flex justify-between items-center">
                                    <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
                                        <div
                                            className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
                                            <img src={bank3} alt=""/>
                                        </div>
                                        <div className="name">
                                            <p className="text-base text-dark-gray dark:text-white font-medium">
                                                Bitski
                                            </p>
                                        </div>
                                    </div>
                                    <div>
                                        <p className="eth text-xl font-bold text-purple">
                                            99,123 ETH
                                        </p>
                                        <p className="usd text-base text-thin-light-gray text-right">
                                            (773.69 USD)
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li className="content-item py-5">
                                <div className="sm:flex justify-between items-center">
                                    <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
                                        <div
                                            className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
                                            <img src={bank4} alt=""/>
                                        </div>
                                        <div className="name">
                                            <p className="text-base text-dark-gray dark:text-white font-medium">
                                                WalletConnect
                                            </p>
                                        </div>
                                    </div>
                                    <div>
                                        <p className="eth text-xl font-bold text-purple">
                                            43,728 ETH
                                        </p>
                                        <p className="usd text-base text-thin-light-gray text-right">
                                            (773.69 USD)
                                        </p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div className="add-money-btn flex justify-center items-center">
                            <button
                                onClick={() => props.addMoneyHandler()}
                                type="button"
                                className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                            >
                                Add Money
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div
                className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple">
                <div className="flex items-center lg:justify-between justify-center w-full h-full">
                    <p className="lg:text-xl text-lg font-bold text-white">
                        $ 234,435.34
                    </p>
                </div>
            </div>
            <div className="lg:hidden block"></div>
        </>);
}