'use client';

import { useEffect, useState } from "react";
import ComponentCard from "@/src/components/admin/common/ComponentCard";
import { useStateContext } from "@/src/context/admin/StateContext";
import AddDesignationForm from "./add-designation";
import DesignationList from "./designation-list";
import { useTableActions } from "@/src/hooks/admin/useTableAction";
import Button from "@/src/components/admin/ui/button/Button";
import { Plus } from "lucide-react";
import SideDrawer from "@/src/components/admin/SideDrawer";
import PageProtection from "@/src/components/admin/common/PageProtection";

export default function DesignationsPage() {
  const { isDrawerOpen, setIsDrawerOpen, itemID } = useStateContext();

  useEffect(() => {
    setIsDrawerOpen(itemID !== undefined);
  }, [itemID, setIsDrawerOpen]);

  const { handleAddNew, handleCloseDrawer } = useTableActions(
    "tbl_designation_master",
  );

  return (
    <>
     <PageProtection pageSlug="master.designation-master">
      <ComponentCard title="Designation Master" desc='Designation Master provides a centralized space to create, manage, and update employee role titles, ensuring consistency and clarity across the organization.'>

        <Button className='mb-4' onClick={handleAddNew}>
          <Plus size={15} />
          Add Designation
        </Button>

        <div className="grid grid-cols-1 lg:grid-cols-1 gap-8">
          <div>
            <DesignationList />
          </div>
        </div>

      </ComponentCard>
      <SideDrawer
        isOpen={isDrawerOpen}
        onClose={handleCloseDrawer}
        title={`${itemID ? 'Edit' : 'Add'} Designation`}
        width="xxl"
      >
        <AddDesignationForm />

      </SideDrawer>
    </PageProtection>
    </>
  );
}