/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./estate-checkout.module.scss"
import { useState } from "react"
import { MdWallet } from "react-icons/md"

const EstateCheckout = () => {
    const [method, setMethod] = useState("wallet")

const toggleMethod = (selectedMethod: any) => {
        setMethod(selectedMethod)
    }
  return (
    <div className={ styles["checkout"] }>
        <div className={ styles["checkout--header"] }>
            <h2>Checkout</h2>
            <p>Please enter the amount you want to invest and proceed to payment</p>
        </div>
        <div className={ styles["checkout--body"] }>
            <div style={{ marginTop: "1rem" }} className={ styles["checkout--body--amount"] }>
                <label htmlFor="amount">Units to buy *</label>
                <div>
                    <select name="" id="">
                        <option value="" disabled selected>Enter the number of units to buy</option>
                        <option value="">1 Unit</option>
                        <option value="">2 Units</option>
                        <option value="">3 Units</option>
                        <option value="">4 Units</option>
                        <option value="">5 Units</option>
                        <option value="">6 Units</option>
                    </select>
                </div>
            </div>

            <div className={ styles["checkout--body--fees"] }>
                <h5>Fees *</h5>
                <div className={ styles["checkout--body--fees--content"] }>
                    <div className={ styles["checkout--body--fees--content--item-a"] }>
                        <p>Platform Fees</p>
                        <p>0.02%</p>
                    </div>
                    <div className={ styles["checkout--body--fees--content--item"] }>
                        <p>Total Fees</p>
                        <p>5 USD</p>
                    </div>
                </div>
            </div>

            <div className={ styles["checkout--body--method"] }>
                <h5>Payment Method *</h5>
                <div onClick={ ()=> toggleMethod("wallet") } className={ method === "wallet" ? styles["checkout--body--method--item--active"] : styles["checkout--body--method--item"] }>
                    <MdWallet color={ method === "wallet" ? "#FF8C42": "white" } size="1.5rem" />
                    <p>Wallet Balance</p>
                </div>

                {/* <div onClick={ ()=> toggleMethod("bank") } className={ method === "bank" ? styles["checkout--body--method--item--active"] : styles["checkout--body--method--item"] }>
                <MdWallet color={ method === "bank" ? "#FF8C42": "white" } size="1.5rem" />
                    <p>Deposit Funds</p>
                </div> */}
            </div>

            <div className={ styles["checkout--body--notice"] }>
                <h5>Time Alert *</h5>
                <small>Your investment starts immediately your payment is confirmed which is usually under a minute</small>
            </div>

            <button>Buy Investment Package</button>
        </div>
    </div>
  )
}

export default EstateCheckout