"use client";
import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import FundForm from "@/components/fund/fund-form";
import FilterForm from "@/components/common/filter-form";
import { usePermission } from "@/utils/auth/permission";
import { FC, useState } from "react";
import { historyFilter } from "@/components/forms/schema/history-filter";
import HistoryList from "@/components/histories/history-list";

const HistoryContent: FC = () => {
    const [isOpen, setOpen] = useState(false);
    const [filterValue, setFilter] = useState(null);
    return (
        <div>
            <PageHeader>
                <div className="flex justify-between !p-0">
                    <div className="flex">
                        <h2 className="text-xl font-semibold">Histories  </h2>
                    </div>
                    {usePermission("funds.create") && (
                        <div>
                            <ActionButton type="add" onClick={() => setOpen(true)}>
                                Add
                            </ActionButton>
                            <FundForm isOpen={isOpen} setOpen={setOpen} />
                        </div>
                    )}
                </div>
            </PageHeader>
            <div>
                <FilterForm schema={historyFilter} setFilter={setFilter} grids={3} />
            </div>
            <div className="overflow-hidden shadow">
                <HistoryList filterValue={filterValue} />
            </div>
        </div>
    );
};

export default HistoryContent;