"use client"

import { useGetWalletBalance } from "@/hooks/useWallet";
import Image from "next/image";
import numeral from "numeral";

const RechargeCard = () => {
  const { data } = useGetWalletBalance()
  const balance = data?.balance;

  return (
    <div
      className="p-6 rounded-lg bg-center bg-no-repeat bg-cover h-[180px] border border-outline-normal flex flex-col justify-center items-center"
      style={{
        backgroundImage: "url('/images/wallet/dashboard-bg.svg')",
      }}
    >
      <div className="txt-title-m">CrushCoin Balance</div>
      <div className="flex items-center gap-1 mt-6">
        <Image src="/icons/diamond.svg" alt="diamond-icon" width={24} height={24} className="mt-2" />
        <div className="txt-numDisplay-l">{numeral(balance).format('0,0')}</div>
      </div>
    </div>
  );
}
 
export default RechargeCard;