import React, { useEffect, useState } from "react";
import axios from 'axios';
import {Link} from 'react-router-dom';

const Wallet = () => {
    const [bal, setBal] = useState("");

    useEffect(() => {

        
        const fetchData = async () => {
            var userid= localStorage.getItem('userid');
            axios.get('https://capitalsgrowth.in/Rest/wallet_api/'+userid).then(res => {
                console.log(res.data);
                setBal(res.data.wallet)
            });
        };

        fetchData();
    }, []);

    return (
        <div className="section wallet-card-section pt-1">
            <div className="wallet-card">
                <div className="balance">
                    <div className="left">
                        <span className="title">Total Balance</span>
                        <h1 className="total">₹{bal}</h1>
                    </div>
                </div>
                
                <div className="wallet-footer">
                    <div className="balance">
                        <div className="left">
                            <Link to="/deposite" className='btn btn-primary'>DEPOSIT</Link>
                        </div>
                        <div className="right">
                            <Link to="/withdrawl" className='btn btn-warning'>WITHDRAW</Link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Wallet;