"use client";
import FilterForm from "@/components/common/filter-form";
import { invoiceFilter } from "@/components/forms/schema/invoice-filter";
import InvoiceList from "@/components/invoices/invoice-list";
import { FC, useState } from "react";
import InvoiceHeader from "./header";
import { clientInvoiceFilter } from "@/components/forms/schema/client-invoice-filter";

type props = {
  clientId?: string;
};

const InvoiceContent: FC<props> = () => {
  const [filterValue, setFilter] = useState<string | null>("#");
  const [reports, setReports] = useState<any | undefined>();
  const [invoiceCount, setInvoiceCount] = useState<number>(0);
  return (
    <>
      <InvoiceHeader reports={reports} invoiceCount={invoiceCount} />
      <div className="block border-t dark:border-gray-500">
        <FilterForm schema={clientInvoiceFilter} grids={4} setFilter={setFilter} />
      </div>
      <div className="overflow-hidden shadow">
        <InvoiceList
          filterValue={filterValue}
          setReports={setReports}
          reports={reports}
          setInvoiceCount={setInvoiceCount}
          api="/api/v1/client-invoices"
        />
      </div>
    </>
  );
};

export default InvoiceContent;