import { useMe, getDisplayName } from '@features/auth'
import { usePortfolio } from '@features/wallet'
import { formatUsd } from '@shared/lib/utils/formatUsd'
import { ProfileAvatar } from './ProfileAvatar'
import styles from './ProfileSummary.module.css'

export function ProfileSummary() {
  const { data } = useMe()
  const { data: portfolio } = usePortfolio()

  const displayName = data ? getDisplayName(data) : ''

  return (
    <div className={styles.profileTop}>
      <ProfileAvatar />
      <div className={styles.userInfo}>
        <span className={styles.userName}>{displayName}</span>
        <span className={styles.userBalance}>{formatUsd(portfolio?.totalUsd)}</span>
        {/* <span className={styles.userBalanceRub}>≈ 22 340,50 ₽</span> */}
      </div>
    </div>
  )
}
