"use client";
import PageHeader from "@/components/PageHeder";
import FilterForm from "@/components/common/filter-form";
import MoneyFormat from "@/components/common/money";
import { paymentFilter } from "@/components/forms/schema/payment-filter";
import PaymentList from "@/components/payments/payment-list";
import { FC, useState } from "react";

type props = {
  clientId?: string;
};

const PaymentContent: FC<props> = ({}) => {
  const [filterValue, setFilter] = useState<string | null>("#");
  const [reports, setReports] = useState<PaymentReports | undefined>({
    amount: 0,
  });
  const [paymentCount, setPaymentCount] = useState<number>(0);
  return (
    <>
      <div>
        <PageHeader>
          <div className="flex justify-between !p-0">
            <h2 className="text-xl font-semibold">Payments ({paymentCount})</h2>
            <div className="flex">
              <div>Total Paid:</div>
              <div className="font-medium inline-block">
                <MoneyFormat amount={reports?.amount} iconClass="mt-1 py-0" />
              </div>
            </div>
          </div>
        </PageHeader>
      </div>
      <div className="block border-t">
        <FilterForm schema={paymentFilter} setFilter={setFilter} />
      </div>
      <div className="overflow-hidden shadow">
        <PaymentList
          filterValue={filterValue}
          setReports={setReports}
          reports={reports}
          setPaymentCount={setPaymentCount}
        />
      </div>
    </>
  );
};

export default PaymentContent;