import { FC, useState } from "react";
import FundTransactionList from "../fund-transaction/fund-transaction-list";
import { Modal } from "flowbite-react";
import FilterForm from "../common/filter-form";
import { fundTransactionFilter } from "../forms/schema/fund-transaction-filter";

type props = {
    isOpen?: boolean,
    setOpen?: (x: boolean) => void,
    fund_id?: string
}

const ViewTransactions: FC<props> = ({ isOpen = false, setOpen, fund_id }) => {
    const [filterValue, setFilter] = useState("#");

    return (
        <>
            <Modal onClose={() => setOpen(false)} show={isOpen} size={"6xl"}>
                <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
                    Fund Transactions
                </Modal.Header>
                <Modal.Body>
                    <div>
                        <FilterForm schema={fundTransactionFilter} setFilter={setFilter} grids={3} />
                    </div>
                    <FundTransactionList api={`/api/v1/fund-transactions/${fund_id}`} filterValue={filterValue} />
                </Modal.Body>
            </Modal>
        </>
    )
}

export default ViewTransactions;