"use client";
import CreateLanguageForm from "@/components/forms/languages/new/CreateLanguageForm";
import LanguagesTable from "@/components/LangaugesTable";
import Loader from "@/components/Loader";
import RoleGuard from "@/components/RoleGuard";
import SearchBox from "@/components/SearchBox";
import {Dialog} from "@/components/ui/dialog";
import {useCreateLanguage} from "@/hooks/languages";
import { useQueryClient } from "@tanstack/react-query";
import {useRouter} from "next/navigation";

import React, {Suspense} from "react";

export default function Page() {
  const router = useRouter();
const queryClient = useQueryClient();
  const {mutateAsync, isPending} = useCreateLanguage();
  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="languages"
            />
          </div>
          <div className="flex items-center justify-end gap-x-7">
            <RoleGuard roles={["ADMIN", "DEVELOPER"]}>
              <Dialog>
                <CreateLanguageForm
                  router={router}
                  createFn={mutateAsync}
                  createPending={isPending}
                  queryClient={queryClient}
                />
              </Dialog>
            </RoleGuard>
          </div>
        </div>
        <div className="space-y-4 mt-10">
          <Suspense fallback={<Loader />}>
            <LanguagesTable />
          </Suspense>
        </div>
      </section>
    </>
  );
}
