import { useQuery } from "@tanstack/react-query"
import { StatusBoxWallet } from "./status-box-wallet"
import { WalletAddress } from "./wallet-address"
import { getWalletDetails } from "../../services/api/wallet"
import { useEffect, useState } from "react"
import { StatusBoxItemInterface } from "../../types"
import { Coin1, DollarCircle } from "iconsax-react"

export const WalletPage = () => {
    const [statusData, setStatusData] = useState<StatusBoxItemInterface[] | []>([])
    const { data, isLoading } = useQuery({
        queryKey: ["wallet"],
        queryFn: getWalletDetails
    })

    useEffect(() => {
        setStatusData([{
            name: "dollar",
            title: "دارایی دلاری",
            icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
            value: data?.data?.user?.dollarBalance,
            detail: true
        },
        {
            name: "coin",
            title: "دارایی از تمدید اشتراک",
            icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
            value: data?.data?.user?.walletBalance,
        }])
    }, [data])

    return (
        <div className="flex flex-col gap-y-[30px] w-full">
            <StatusBoxWallet statusData={statusData} isLoading={isLoading} />
            <WalletAddress pending={data?.data?.pending} />
        </div>
    )
}