import { FC } from "react";
import MoneyFormat from "../common/money";

type props = {
  reports?: PaymentReports;
};
const PaymentReports: FC<props> = ({ reports }) => {
  return (
    <>
      <div className="border-t p-2 px-4">
        <div className="grid gap-6 grid-cols-1 md:grid-cols-2">
          <div>
            Total Paid:
            <div className="font-bold inline-block">
              <MoneyFormat amount={reports?.amount as string} />
            </div>
          </div>
          <div className="flex justify-end">
            Total Due:
            <div className="font-bold inline-block ml-2">
              <MoneyFormat amount={reports?.amount} />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default PaymentReports;