import Loader from "@/components/Loader";
import OnlineCasesTable from "@/components/OnlineCasesTable";
import RoleGuard from "@/components/RoleGuard";
import SearchBox from "@/components/SearchBox";
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"
              label="جستجو نام خانوادگی"
              hasLabel
              placeholder="جستجو نام خانوادگی پزشک ..."
              route="doctors"
            />
          </div>
          <div className="flex items-center justify-end gap-x-7">
            <RoleGuard roles={["ADMIN", "DEVELOPER", "COORDINATOR"]}>
              <Link
                href={"/online-case/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","COORDINATOR"]}>
              <UsersTableExport table="DOCTOR" />
            </RoleGuard> */}
          </div>
        </div>
        <div className="space-y-4 mt-10">
          <Suspense fallback={<Loader />}>
            <OnlineCasesTable />
          </Suspense>
        </div>
      </section>
    </>
  );
}
