import { FundBar } from '../../widgets/FundBar'
import { Page } from '../../layout/Page'
import { useAccounts } from '../../hooks/getMany/useAccounts'

import './style.scss'

export const Dashboard = () => {
  const accounts = useAccounts()
  if (!accounts.data) return <div>loading...</div>

  // TODO: Month select

  return (
    <Page>
      <h1>Remaining Balances</h1>
      {accounts.data?.map((account) => (
        <div key={account.id} className="account-overview">
          <h3>{account.name}</h3>
          <div className="funds">
            {account.stacks.map((stack) => (
              <FundBar key={stack.id} stack={stack} />
            ))}
          </div>
        </div>
      ))}
    </Page>
  )
}