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() {
  return (
    <div className={styles.main}>
      <div className={styles.banks}>
        <div
          className={styles.title}
        >
          <AiOutlineBank
            className={styles.banksLogo}
            size={25}
          />
          Banks
        </div>
        <Bank
          bankLogoSrc="/sbi.svg"
          bankName="SBI"
          bankBalance="27,932"
        />
        <Bank
          bankLogoSrc="/icici.svg"
          bankName="ICICI"
          bankBalance="7,932"
        />
        <Bank
          bankLogoSrc="/hdfc.svg"
          bankName="HDFC"
          bankBalance="2,58,630"
        />
        <Bank
          bankLogoSrc="/axis.svg"
          bankName="Axis"
          bankBalance="55,410"
        />
      </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}>3,49,904</div>
        </div>
        <div className={styles.message}>
          ↑20% compared to previous month
        </div>
        <Graph />
      </div>
    </div>
  )
}