"use client";
import { useState, type FC } from "react";

import ActionButton from "@/components/action-button";
import FilterForm from "@/components/common/filter-form";
import { resellerFilter } from "@/components/forms/schema/mac-filter";
import ResellerList from "@/components/reseller/reseller-list";
import { usePermission } from "@/utils/auth/permission";
import Link from "next/link";
import { HiPlus } from "react-icons/hi";

const ResellerContent: FC = () => {
  const [filterValue, setFilter] = useState("");
  const [loading, setLoading] = useState(false);
  return (
    <>
      <div className="block items-center justify-between border-b border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800 z-0">
        <div className="mb-1 w-full flex items-center justify-between">
          <div className="sm:flex">
            <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
              Resellers
            </h1>
          </div>
          <div className="ml-auto flex items-center space-x-2 sm:space-x-3 ">
            {usePermission("resellers.create") && (
              <Link href="/resellers/create">
                <ActionButton
                  type="any"
                  isLoading={loading}
                  onClick={() => setLoading(true)}
                  size="sm"
                >
                  <div className="flex">
                    {!loading && <HiPlus className="text-xl" />}
                    <span>Add</span>
                  </div>
                </ActionButton>
              </Link>
            )}
          </div>
        </div>
      </div>
      <div className="block">
        <FilterForm schema={resellerFilter} setFilter={setFilter} />
      </div>
      <div className="">
        <ResellerList filterValue={filterValue} />
      </div>
    </>
  );
};

export default ResellerContent;