import styles from './BalanceCard.module.css'
import topup from '@shared/assets/topup.svg'
import swap from '@shared/assets/swap.svg'
import { Link } from 'react-router-dom'
import { ROUTES } from '@shared/config/routes'
import { usePortfolio } from '@features/wallet'

export function BalanceCard() {
  const { data, isLoading } = usePortfolio()
  const display =
    isLoading || !data || data.totalUsd == null
      ? '$—'
      : `$${data.totalUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`

  return (
    <div className={styles.card}>
      <div className={styles.left}>
        <div className={styles.label}>Общий баланс</div>
        <div className={styles.amount}>{display}</div>
      </div>
      <div className={styles.actions}>
        <Link to={ROUTES.CONVERTER} className={styles.btn} type="button">
          <img src={swap} alt="swap" />
          Пополнить кошелёк
        </Link>
        <Link to={ROUTES.SWAP} className={styles.btn} type="button">
          <img src={topup} alt="topup" />
          Своп / Бридж
        </Link>
      </div>
    </div>
  )
}
