import React from "react";
import styles from "./Transaction.module.sass"

export default function Transaction(props) {
  // console.log(props);
  return (
    <div className={styles.transaction_card}>
        <span className={styles.transaction_date}>{props.date}</span>
        <span className={styles.transaction_type}>{props.type}</span>
        <span className={styles.transaction_payee}>{props.payee}</span>
        <span className={styles.transaction_descr}>{props.descr}</span>
      {props.parts &&
        props.parts.map((part, index) => {
          return (
            <>
              <span className={styles.transaction_extract} key={"extract" + index}>
                {part.extract ? <i class="fa-regular fa-circle-left"></i> : <i class="fa-regular fa-circle-right"></i> }
              </span>
              <span className={styles.transaction_account} key={"account"+index}>{part.account || " "}</span>
              <span className={styles.transaction_amount} key={"amount"+index}>{part.amount || " "}</span>
              <span className={styles.transaction_currency} key={"currency"+index}>{part.currency || " "}</span>
            </>
          );
        })}
    </div>
  );
}