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

type props = {
  reports?: InvoiceReports;
};
const InvoiceReports: FC<props> = ({ reports }) => {
  return (
    <>
      <div className="px-2 py-1 grid gap-2 grid-cols-1 md:grid-cols-4 dark:text-gray-400 dark:bg-gray-800">
        <div className="flex">
          Sub Total:
          <div className="font-medium inline-block ml-2">
            <MoneyFormat amount={reports?.total_amount} />
          </div>
        </div>
        <div className="flex justify-start md:justify-center lg:justify-center">
          <div>
            Discount:
            <div className="font-medium inline-block ml-2">
              <MoneyFormat amount={reports?.discount} />
            </div>
          </div>
        </div>
        <div className="flex justify-start md:justify-end lg:justify-end">
          Total:
          <div className="font-medium inline-block ml-2">
            <MoneyFormat amount={reports?.after_discount_amount} />
          </div>
        </div>
        <div className="flex justify-start md:justify-end lg:justify-end">
          Paid:
          <div className="font-medium inline-block ml-2">
            <MoneyFormat amount={reports?.amount_paid} />
          </div>
        </div>
      </div>
    </>
  );
};

export default InvoiceReports;