import PageContainer from "@/components/layout/page-container";
import { buttonVariants } from "@/components/ui/button";
import TrainingMatrixListingPage from "@/features/training-matrix/components/training-matrix-listing";
import { requirePermissionDashboardAccess } from "@/lib/auth/page-guards";
import { searchParamsCache } from "@/lib/searchparams";
import { cn } from "@/lib/utils";
import { Icons } from "@/components/icons";
import Link from "next/link";
import { SearchParams } from "nuqs/server";

export const metadata = {
  title: "Dashboard: การอบรมตามตำแหน่ง",
};

type PageProps = {
  searchParams: Promise<SearchParams>;
};

export default async function Page(props: PageProps) {
  await requirePermissionDashboardAccess("training_matrix:read");

  const searchParams = await props.searchParams;
  searchParamsCache.parse(searchParams);

  return (
    <PageContainer
      pageTitle="การอบรมตามตำแหน่ง"
      pageDescription="จัดทำแผนที่หลักสูตรที่จำเป็นให้สอดคล้องกับตำแหน่งงาน และตรวจสอบการปฏิบัติตามข้อกำหนด"
      pageHeaderAction={
        <Link
          href="/dashboard/training-matrix/new"
          className={cn(buttonVariants(), "text-xs md:text-sm")}
        >
          <Icons.add className="mr-2 h-4 w-4" /> กำหนดหลักสูตรตามตำแหน่ง
        </Link>
      }
    >
      <TrainingMatrixListingPage />
    </PageContainer>
  );
}
