import React from 'react'
import styles from './recentTnx.module.css'
import { BsTriangleFill } from 'react-icons/bs';
import SingleTransaction from './SingleTransaction'

export default function RecentTransactions() {
  const transactions = [
    {
      title: "Fenny's Banglore",
      datetime: "Today, 11:17 am",
      amount: "3,940",
      tag: "Tag",
    }, {
      title: "Sendoor",
      datetime: "Today, 11:45 pm",
      amount: "35",
      tag: "Food & Drinks",
      icon_type: "drink",
    }, {
      title: "Reliance Fresh",
      datetime: "Yesterday, 5:37 pm",
      amount: "2,399",
      tag: "Groceries",
      icon_type: "groceries",
    }, {
      title: "Chai Point",
      datetime: "Yesterday, 12:17 pm",
      amount: "312",
      tag: "Food & Drinks",
      icon_type: "food",
    }, {
      title: "Uber",
      datetime: "Jan 2, 10:32 am",
      amount: "75",
      tag: "Transport",
      icon_type: "transport",
    }, {
      title: "Swiggy",
      datetime: "Jan 1, 11:17 pm",
      amount: "249",
      tag: "Food & Drinks",
      icon_type: "swiggy",
    }, {
      title: "Netflix",
      datetime: "Dec 31, 11:59 pm",
      amount: "199",
      tag: "Subsciption",
      icon_type: "netflix",
    }
  ]

  const recent_transactions = [];
  transactions.forEach((transaction) => {
    recent_transactions.push(
      <SingleTransaction
        title={transaction.title}
        tag={transaction.tag}
        datetime={transaction.datetime}
        amount={transaction.amount}
        icon_type={transaction.icon_type}
      />
    )
  })


  return (
    <div className={styles.main}>
      <div className={styles.heading}>
        <div className={styles.hRecTnx}>Recent Transactions</div>
        <div className={styles.hSeeAll}>See All</div>
      </div>

      <div className={styles.options}>
        <div className={styles.optionButton}>
          <div>All transactions</div>
          <div>
            <BsTriangleFill
              size={10}
              className={styles.arrow}
              color="#676483"
            />
          </div>
        </div>
        <div className={styles.optionButton}>
          <div>All banks</div>
          <div>
            <BsTriangleFill
              size={10}
              className={styles.arrow}
              color="#676483"
            />
          </div>
        </div>
      </div>

      <div>
        {recent_transactions}
      </div>
    </div>
  )
}