import React from 'react'
import { formatUTCToLocalTime } from '../../utils/dateUtils'
import { formatFigure } from '../../utils/appUtils'
import Avatar from '../common/Avatar'

const PaymentHistoryTable = ({data}) => {
  return (
    <div>
      
        {data?.receivedInvoicePayments?.length > 0 && (
          <div className="mt-4">
            <table className="table table-bordered mt-2">
              <thead className="table-light">
                <tr>
                  <th className="text-center">Sr.No</th>
                  <th className="text-center">Transaction ID</th>
                  <th className="text-center"> Received Date</th>
                  <th className="text-center">Amount</th>
                  <th className="text-center">Updated By</th>
                </tr>
              </thead>
              <tbody>
                {data.receivedInvoicePayments.map((payment, index) => (
                  <tr key={payment.id}>
                    <td className="text-center">{index + 1}</td>
                    <td ><span className="mx-2">{payment.transactionId}</span></td>
                    <td className="text-center">{formatUTCToLocalTime(payment.paymentReceivedDate)}</td>
                    <td className="text-end">
                      <span className="px-1">{formatFigure(payment.amount, {
                        type: "currency",
                        currency: "INR",
                      })}</span>
                    </td>
                    <td>
                      <div className="d-flex align-items-center mx-2">
                        <Avatar
                          size="xs"
                          firstName={payment.createdBy?.firstName}
                          lastName={payment.createdBy?.lastName}
                        />
                        {payment.createdBy?.firstName}{" "}
                        {payment.createdBy?.lastName}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
    </div>
  )
}

export default PaymentHistoryTable