"use client";
import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import { usePermission } from "@/utils/auth/permission";
import Link from "next/link";
import { FC, useState } from "react";
import { HiPlus } from "react-icons/hi";

const StaffContent: FC = () => {
  const [isLoading, setLoading] = useState(false);
  return (
    <div>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">All Staffs</h2>
          {usePermission("staffs.create") && (
            <div className="flex">
              <Link href="/staffs/create">
                <ActionButton
                  type="any"
                  isLoading={isLoading}
                  onClick={() => setLoading(true)}
                  size="sm"
                >
                  <div className="flex">
                    {!isLoading && <HiPlus className="text-xl" />}
                    <span>Add</span>
                  </div>
                </ActionButton>
              </Link>
            </div>
          )}
        </div>
      </PageHeader>
    </div>
  );
};

export default StaffContent;