foldbank-mock/web/app/components/Upcoming.tsx

import React from 'react'
import styles from './upcoming.module.css'
import { BsTriangleFill } from 'react-icons/bs'
import RecurringPayment from './RecurringPayment'

export default function Upcoming() {
  const recurringPayments = [
    {
      title: "2568 Rent",
      amount: "36,163",
      due_in_days: "7",
      icon_type: "rent",
    },
    {
      title: "YouTube Premium",
      amount: "130",
      due_in_days: "17",
      icon_type: "youtube",
    },
  ]
  const recurringPaymentsDiv = []
  recurringPayments.forEach((payment) => {
    recurringPaymentsDiv.push(
      <RecurringPayment
        key={payment.title}
        title={payment.title}
        amount={payment.amount}
        due_in_days={payment.due_in_days}
        icon_type={payment.icon_type}
      />
    )
  })


  return (
    <div className={styles.main}>
      <div className={styles.summary}>
        <div className={styles.left}>
          <BsTriangleFill
            size={10}
            className={styles.arrow}
          />
          <div className={styles.text}>Upcoming</div>
        </div>
        <div className={styles.right}>₹36,163</div>
      </div>
      {recurringPaymentsDiv}
    </div>
  )
}