"use client";

import ExpertiseTable from "@/components/ExpertiseTable";
import LanguagesFilterBox from "@/components/LanguagesFilterBox";
import RoleGuard from "@/components/RoleGuard";
import SearchBox from "@/components/SearchBox";
import { Spinner } from "@/components/ui/spinner";

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

import React, { Suspense, useState } from "react";

export default function Page() {
  const [lang,setLang]=useState<string>("fa");
  return (
    <>
      <section>
        <div className="flex items-center justify-between">
          <div className="flex items-center justify-start gap-x-8">
            <SearchBox
              inputName="search"
              label="عنوان"
              hasLabel
              route="expertise"
            />
            <LanguagesFilterBox lang={lang} setLang={setLang}/>
          </div>
          <div className="flex items-center justify-end gap-x-7">
            <RoleGuard roles={["DEVELOPER"]}>
              <Link
                href={"/expertise/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={<Spinner />}>
            <ExpertiseTable lang={lang}/>
          </Suspense>
        </div>
      </section>
    </>
  );
}
