import React from 'react'
import styles from './dashboard.module.css'
import Bank from './Bank'
import Graph from './Graph'
import { AiOutlineBank } from 'react-icons/ai';
import { BiRupee } from 'react-icons/bi';


export default function Dashboard({ bankDetails }) {
  const banks = []
  let total_balance = 0
  bankDetails.forEach((bank) => {
    total_balance += bank.balance
    banks.push(
      <Bank
        bankLogoSrc={`https://api.foldbank.codingcoffee.me/media/${bank.bank.logo}`}
        bankName={bank.bank.name}
        bankBalance={bank.balance.toLocaleString('en-IN')}
      />
    )
  })


  return (
    <div className={styles.main}>
      <div className={styles.banks}>
        <div
          className={styles.title}
        >
          <AiOutlineBank
            className={styles.banksLogo}
            size={25}
          />
          Banks
        </div>
        {banks}
      </div>
      <div className={styles.totalBalance}>
        <div
          className={styles.title}
        >
          <div className={styles.rupeeHolder}>
            <BiRupee
              className={styles.rupeeLogo}
              size={20}
            />
          </div>
          Total Balance
        </div>
        <div className={styles.totalBalanceAmountHolder}>
          <div>₹</div>
          <div className={styles.amount}>{total_balance.toLocaleString('en-IN')}</div>
        </div>
        <div className={styles.message}>
          ↑20% compared to previous month
        </div>
        <Graph />
      </div>
    </div>
  )
}