import React from 'react'
import BankAccount from './BankAccount'

export default function BankAccounts({ bankDetails }) {
  const bankAccounts = []
  const infoTitles = [
    {
      "title": "Account Number",
      "key": "account_number",
    },
    {
      "title": "IFSC Code",
      "key": "ifsc_code",
    },
    {
      "title": "Swift BIC",
      "key": "swift_bic",
    },
    {
      "title": "Holder's Name",
      "key": "holders_name",
    },
  ]


  bankDetails.forEach((bank) => {
    const infoLines = []
    infoTitles.forEach((option) => {
      infoLines.push({
        "title": option.title,
        "value": bank[option.key],
      })
    })

    bankAccounts.push(
      <BankAccount
        key={bank.bank.name}
        bankLogoSrc={`https://api.foldbank.codingcoffee.me/media/${bank.bank.logo}`}
        bankName={bank.bank.name}
        bankFullName={bank.bank.name}
        bankAccountBalance={bank.balance.toLocaleString('en-IN')}
        infoLines={infoLines}
      />
    )
  })


  return (
    <>
      {bankAccounts}
    </>
  )
}