"use client";
import DenyAccess from "@/components/DenyAccess";
import CreateExpertiseForm from "@/components/forms/expertise/new/CreateExpertiseForm";
import Loader from "@/components/Loader";
import SectionTitle from "@/components/SectionTitle";
import {useCreateExpertise} from "@/hooks/expertise";
import {useGetLanguages} from "@/hooks/languages";
import Link from "next/link";
import {useRouter} from "next/navigation";
import React, {Suspense} from "react";

export default function Page() {
  const router = useRouter();
  const {data} = useGetLanguages();
  const {mutateAsync, isPending} = useCreateExpertise();
  return (
    <div>
      <div className="flex items-center justify-between mb-10">
        <SectionTitle label="فرم افزودن تخصص جدید" />
        <Link
          href={`/expertise`}
          className="text-sm bg-primary px-4 py-2 rounded-lg text-white"
        >
          مشاهده لیست تخصص ها
        </Link>
      </div>
      <Suspense fallback={<Loader size="4" />}>
        {
          data?.data ? data?.data?.length > 0 ? <CreateExpertiseForm
            router={router}
            createFn={mutateAsync}
            createPending={isPending}
            languages={data?.data}
          /> : <DenyAccess label="زبان" link="/languages"/> : <div>خطا در دریافت اطلاعات زبان ها</div>
        }
        
      </Suspense>
    </div>
  );
}
