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


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",
  //   }
  // ]

  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>

      <RecentTransactionsList />
    </div>
  )
}