import { FC, useState } from "react";
import FilterForm from "../common/filter-form";
import ExpenseReport from "./expense-report";
import InvoiceReport from "./invoice-report";

const IncomeExpense: FC = () => {
  const [filterValue, setFilter] = useState("#");
  const schema = [
    {
      name: "create_date",
      type: "date_range",
      placeholder: "Create Date",
      idName: "create_date",
    },
  ];
  return (
    <div>
      <div className="w-full mb-5">
        <FilterForm
          searchButton={false}
          schema={schema}
          grids={1}
          setFilter={setFilter}
        />
      </div>

      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-2 w-full ml-2">
        <div className="border-r pr-4">
          <InvoiceReport filterValue={filterValue} />
        </div>
        <div>
          <ExpenseReport filterValue={filterValue} />
        </div>
      </div>
    </div>
  );
};

export default IncomeExpense;