import styles from './centerCol.module.css'
import React from 'react'
import Dashboard from './Dashboard'
import BankAccount from './BankAccount'

export default function CenterCol() {
  const bankDetails = {
    banks: [{
      bankName: "SBI",
      bankFullName: "State Bank of India",
      bankLogoSrc: "/sbi.svg",
      bankAccountBalance: "27,932",
      infoLines: [{
        title: "Account Number",
        value: "34536896852",
      }, {
        title: "IFSC Code",
        value: "SBIN0006586",
      }, {
        title: "Swift BIC",
        value: "6895206BB",
      }, {
        title: "Holder's Name",
        value: "Nishant Verma",
      }]
    }, {
      bankName: "HDFC",
      bankFullName: "HDFC Bank",
      bankLogoSrc: "/hdfc.svg",
      bankAccountBalance: "2,58,630",
      infoLines: [{
        title: "Account Number",
        value: "92531805286",
      }, {
        title: "IFSC Code",
        value: "HDFC0002233",
      }, {
        title: "Swift BIC",
        value: "HDFCINBBBNG",
      }, {
        title: "Holder's Name",
        value: "Nishant Verma",
      }]
    }, {
      bankName: "Axis",
      bankFullName: "Axis Bank",
      bankLogoSrc: "/axis.svg",
      bankAccountBalance: "55,410",
      infoLines: [{
        title: "Account Number",
        value: "34536896852",
      }, {
        title: "IFSC Code",
        value: "SBIN0006586",
      }, {
        title: "Swift BIC",
        value: "6895206BB",
      }, {
        title: "Holder's Name",
        value: "Nishant Verma",
      }]
    }, {
      bankName: "ICICI",
      bankFullName: "ICICI Bank",
      bankLogoSrc: "/icici.svg",
      bankAccountBalance: "7,932",
      infoLines: [{
        title: "Account Number",
        value: "92531805286",
      }, {
        title: "IFSC Code",
        value: "HDFC0002233",
      }, {
        title: "Swift BIC",
        value: "HDFCINBBBNG",
      }, {
        title: "Holder's Name",
        value: "Nishant Verma",
      }]
    }]
  }

  const bankAccounts = []
  bankDetails.banks.forEach((bank) => {
    bankAccounts.push(
      <BankAccount
        key={bank.bankName}
        bankLogoSrc={bank.bankLogoSrc}
        bankName={bank.bankName}
        bankFullName={bank.bankFullName}
        bankAccountBalance={bank.bankAccountBalance}
        infoLines={bank.infoLines}
      />
    )
  })

  return (
    <div className={styles.main}>
      <div className={styles.title}>
        <div className={styles.greeting}>Good morning, Nishant</div>
        <div className={styles.date}>It's 3rd of January, a Monday</div>
      </div>
      <Dashboard />
      <div className={styles.accounts}>
        {bankAccounts}
      </div>
    </div>
  )
}