'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="border-outline-normal flex h-[180px] flex-col items-center justify-center rounded-lg border bg-cover bg-center bg-no-repeat p-6"
      style={{
        backgroundImage: "url('/images/wallet/dashboard-bg.svg')",
      }}
    >
      <div className="txt-title-m">CrushCoin Balance</div>
      <div className="mt-6 flex items-center gap-1">
        <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
