
import Loader from "@/components/Loader";
import RoleGuard from "@/components/RoleGuard";
import SearchBox from "@/components/SearchBox";
import TransferTeamTable from "@/components/TransferTeamTable";
import UsersTableExport from "@/components/usersTableExport";

import {Plus} from "lucide-react";
import Link from "next/link";
import React, {Suspense} from "react";

export default function Page() {
  return (
    <>
      <section>
        <div className="flex items-center justify-between">
          <div className="flex items-center justify-start gap-x-8">
            <SearchBox
              inputName="search"
              hasLabel
              label="نام خانوادگی"
              placeholder="جستجو نام خانوادگی عضو تیم ..."
              route="transfer-team"
            />
          </div>
          <div className="flex items-center justify-end gap-x-7">
            <RoleGuard roles={["ADMIN","DEVELOPER"]}>
              <Link
                href={"/transfer-team/members/new"}
                className="text-white bg-primary py-1.5 px-3 rounded-lg flex items-center gap-x-2 text-sm"
              >
                <Plus size={"20"} />
                <span>افزودن عضو جدید</span>
              </Link>
            </RoleGuard>
            <RoleGuard roles={["ADMIN","DEVELOPER"]}>
              <UsersTableExport table="TRANSFER_TEAM" />
            </RoleGuard>
          </div>
        </div>
        <div className="space-y-4 mt-10">
          <Suspense fallback={<Loader />}>
            <TransferTeamTable />
          </Suspense>
        </div>
      </section>
    </>
  );
}
