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="pt-1 data-tabe table-responsive">
            <table className="table table-bordered table-responsive 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"> Payment Adjustment-Head</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-start">{payment?.paymentAdjustmentHead?.name ?? "--"}</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 py-1">
                       
                        {payment.createdBy?.firstName}{" "}
                        {payment.createdBy?.lastName}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ):(<div className='text-center py-2'><p>No History</p></div>)}
    </div>
  )
}

export default PaymentHistoryTable