import { FundBar } from '../components/FundBar'
import { usePromise } from '@dank-inc/use-get'
import { useAppContext } from '../../contexts/AppContext'

export const Dashboard = () => {
  const { api } = useAppContext()
  const stacks = usePromise(api.getStacks())

  if (stacks.loading || !stacks.data) return <div>loading...</div>

  return (
    <>
      <h1>Remaining Balances</h1>
      <div className="funds">
        {stacks.data.map((stack, i) => (
          <FundBar key={stack.id} stack={stack} col={i + 1} />
        ))}
      </div>
    </>
  )
}