import { useRef, type ReactElement } from "react";
import { Layout } from "@/components/layout/Layout";
import {
  DesignationsTable,
  type DesignationsTableRef,
} from "@/components/superadmin";
import { PrimaryButton } from "@/components/shared";
import { Plus } from "lucide-react";
import { usePermissions } from "@/hooks/usePermissions";

const Designations = (): ReactElement => {
  const tableRef = useRef<DesignationsTableRef>(null);
  const { canCreate } = usePermissions();

  return (
    <Layout
      currentPage="Designations"
      pageHeader={{
        title: "Designation Management",
        description: "View and manage all designations within your organization.",
        action: canCreate("designations") ? (
          <PrimaryButton
            size="default"
            className="flex items-center gap-2"
            onClick={() => tableRef.current?.openNewModal()}
          >
            <Plus className="w-4 h-4" />
            <span>New Designation</span>
          </PrimaryButton>
        ) : null,
      }}
    >
      <DesignationsTable ref={tableRef} />
    </Layout>
  );
};

export default Designations;