import React from "react";
import "./index.css";

/**
 * Transaction card component
 * @module Profile/TransactionHistory/TransactionCard
 * @param data {object} Transaction data
 * @return {JSX.Element}
 */
const TransactionCard = ({ data }) => {
  return (
    <div className="transaction_card mb-2">
      <div className="transaction_card_item flex justify-between mb-3">
        <div className="transaction_company mb-2">
          <span>{data?.company_name || ""}</span>
        </div>
        <div className="transaction_status_container text-secondary">
          <b> {data?.transaction_type || ""}</b>
        </div>
      </div>
      <div className="transaction_card_item transaction_card_item_border mb-1 text-secondary">
        Total kitta: <span>{data?.transaction_kitta || 0}</span>
      </div>
      <div className="transaction_card_item transaction_card_item_border flex justify-between">
        <b>Payment Amount</b>
        <div>{data?.amount || 0}</div>
      </div>
      <div className="transaction_card_item transaction_card_item_border text-sm mt-4 mb-3">
        Remarks: {data?.remarks || ""}
      </div>
    </div>
  );
};

export default TransactionCard;