import React, { FC } from "react";
import { TSclientPaymentSchema } from "../forms/schema/client-payment";

type props = {
  client: TSclientPaymentSchema;
};
const PaymentConfirm: FC<props> = ({ client }) => {
  return (
    <>
      <div className="m-auto pb-5 max-w-[400px] px-6">
        <div className="grid gap-y-2 grid-cols-2">
          <div className="text-gray-700">Name:</div>
          <div className="text-right">{client?.name}</div>
          <div className=" text-gray-700">Phone:</div>
          <div className="text-right">{client?.phone}</div>
          <div className=" text-gray-700">Bandwidth:</div>
          <div className="text-right">{client?.package.bandwidth}</div>
          <div className=" text-gray-700">package:</div>
          <div className="text-right">{client?.package?.mikrotik_profile}</div>
          <div className=" text-gray-700">Billing Terms:</div>
          <div className="text-right">{client?.billing_terms}</div>
          <div className=" text-gray-700">Payment Terms:</div>
          <div className="text-right mb-4">{client?.payment_terms} Month</div>
          {client?.invoice &&
            client.invoice.map((invoice: any, index) => (
              <React.Fragment key={index}>
                <div className="w-[200px] text-gray-700">
                  {invoice?.invoice_id}-Due-{invoice.month}:
                </div>
                <div className="text-right">
                  {invoice?.after_discount_amount}
                </div>
              </React.Fragment>
            ))}
          <div className="text-gray-700 border-t pt-2">Total Due:</div>
          <div className="border-t text-right pt-2">{client?.total_due}</div>
        </div>
      </div>
    </>
  );
};

export default PaymentConfirm;