"use client";
import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import FilterForm from "@/components/common/filter-form";
import { salaryFilter } from "@/components/forms/schema/salary-filter";
import SalaryList from "@/components/salary/salary-list";
import { usePermission } from "@/utils/auth/permission";
import { FC, useState } from "react";
import { HiPlus } from "react-icons/hi";
import SalaryForm from "@/components/salary/salary-form";
import { useRouter } from "next/navigation";

const SalaryContent: FC = () => {
    const router = useRouter();
    const [filterValue, setFilter] = useState("#");

    return (
        <div>
            <PageHeader>
                <div className="flex justify-between !p-0">
                    <h2 className="text-xl font-semibold">Salaries</h2>
                    {usePermission("salaries.create") && (
                        <>
                            <ActionButton type="any" size="sm" onClick={() => router.replace("/salaries/create")}>
                                <HiPlus className="mr-1 text-lg" /> Add
                            </ActionButton>
                        </>
                    )}
                </div>
            </PageHeader>
            {/* <div>
                <FilterForm schema={salaryFilter} setFilter={setFilter} grids={6} />
            </div> */}
            <div className="overflow-hidden shadow">
                <SalaryList filterValue={filterValue} />
            </div>
        </div>
    );
};

export default SalaryContent;