import React from 'react'
import styles from './bankAccount.module.css'
import Image from 'next/image'
import BankAccountInfoLine from './BankAccountInfoLine'

export default function BankAccount(props) {

  const infoLines = []
  props.infoLines.forEach((infoLine) => {
    infoLines.push(
      <BankAccountInfoLine
        key={infoLine.title}
        title={infoLine.title}
        value={infoLine.value}
      />
    )
  })

  return (
    <div className={styles.main}>
      <div className={styles.bank}>
        <Image
          src={props.bankLogoSrc}
          alt={`${props.bankName} Logo`}
          className={styles.bankLogo}
          width={28}
          height={28}
          priority
        />
        <div className={styles.bankName}>{props.bankFullName}</div>
      </div>

      <div className={styles.accountBalance}>
        <div className={styles.rupee}>₹</div>
        <div className={styles.amount}>{props.bankAccountBalance}</div>
      </div>

      <div>
        {infoLines}
      </div>

      <div className={styles.download}>Download Statement</div>
    </div>
  )
}