import WWithdrawalInfo from '@widgets/WWithdrawalInfo';
import styles from './styles.module.scss'
import { useState } from 'react';

const WWithdrawForm = ({ maxAmount = 40 }) => {
    const [amount, setAmount] = useState(0);
    const onMaxBtnClick = () => {
        setAmount(maxAmount);
    }

    const handleAmount = (value) => {
        value = Math.min(value, maxAmount);
        setAmount(value);
    }

    return (
        <div className={styles.container}>
            <div className={styles.amount_title}>
                Withdraw Amount
                <div className={styles.row_line}>
                    <div className={styles.dot_box}>?</div>
                    <span>&nbsp;&nbsp;Min: ${maxAmount}</span>
                </div>
            </div>
            <div className={styles.amount_box}>
                $
                <input
                    className={styles.input_box}
                    type='number' value={amount}
                    onChange={e => handleAmount(e.target.value)} />
                <button className={styles.max_btn} onClick={onMaxBtnClick}>Max</button>
            </div>

            <div>WALLET TYPE</div>
            <WWithdrawalInfo amount={amount}></WWithdrawalInfo>
        </div>
    )
}


export default WWithdrawForm;