import { FC } from "react";
import MoneyFormat from "../common/money";
import { TSinvoiceSchema } from "../forms/schema/invoice";

type props = {
  reports?: InvoiceReports;
  invoice: TSinvoiceSchema[];
};
const ClientInvoiceReports: FC<props> = ({ reports, invoice }) => {
  const pay = invoice[0];
  return (
    <>
      <div className="border-b p-2 px-3">
        <div className="grid gap-6 grid-cols-1 md:grid-cols-4">
          <div>
            Name:
            <span className="font-normal inline-block ml-2">
              {pay?.client?.name}
            </span>
          </div>
          <div>
            Phone:
            <span className="font-normal inline-block ml-2">
              {pay?.client?.phone}
            </span>
          </div>
          <div>
            Address:
            <span className="font-normal inline-block ml-2">
              {pay?.client?.current_address}
            </span>
          </div>
          <div>
            pppoe username:
            <span className="font-normal inline-block ml-2">
              {pay?.client?.pppoe_username}
            </span>
          </div>
        </div>
      </div>
      <div className="border-t p-2 px-3">
        <div className="grid gap-6 grid-cols-1 md:grid-cols-3 lg:grid-clos-3">
          <div>
            Sub Total:
            <span className="font-bold inline-block ml-2">
              <MoneyFormat amount={reports?.total_amount} />
            </span>
          </div>
          <div>
            Discount:
            <span className="font-bold inline-block ml-2">
              <MoneyFormat amount={reports?.discount} />
            </span>
          </div>
          <div className="flex justify-end">
            Total:
            <span className="font-bold inline-block ml-2">
              <MoneyFormat amount={reports?.after_discount_amount} />
            </span>
          </div>
        </div>
      </div>
    </>
  );
};

export default ClientInvoiceReports;