"use client";
import FilterForm from "@/components/common/filter-form";
import { vendorFilter } from "@/components/forms/schema/vendor-filter";
import PageHeader from "@/components/PageHeder";
import VendorForm from "@/components/vendors/vendor-form";
import VendorList from "@/components/vendors/vendor-list";
import { usePermission } from "@/utils/auth/permission";
import { Button } from "flowbite-react";
import { FC, useState } from "react";
import { HiPlus } from "react-icons/hi";

const VendorContent: FC = () => {
  const [isOpen, setOpen] = useState(false);
  const [filterValue, setFilter] = useState("#")
  return (
    <div>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">All Vendors</h2>
          {usePermission("vendors.create") && (
            <>
              <Button color="blue" onClick={() => setOpen(true)}>
                <div className="flex">
                  <HiPlus className={"mr-2 mt-1"} />
                  <span> Add</span>
                </div>
              </Button>
              <VendorForm isOpen={isOpen} setOpen={setOpen} />
            </>
          )}
        </div>
      </PageHeader>
      <div>
        <FilterForm schema={vendorFilter} setFilter={setFilter} grids={3} />
      </div>
      <div className="overflow-hidden shadow">
        <VendorList filterValue={filterValue} />
      </div>
    </div>
  );
};

export default VendorContent;