import { usePendingUsers } from "@/user-management/userManagement/hooks/usePendingUsersHook";
import ApprovalCard from "@/user-management/userManagement/dialogs/PendingUsersCard";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";

const UserApprovalDropdown = () => {
  const navigate = useNavigate();
  const { t } = useTranslation();

  const {
    pendingUsers,
    loadingPendingUsers,
    approveMutation,
    rejectMutation,
  } = usePendingUsers({ take: 5, skip: 0 });

  const count = pendingUsers?.count || 0;
  const pendingEmployees = pendingUsers?.items || [];

  return (
    <div className="space-y-2">
      {pendingEmployees.length === 0 ? (
        <p className="text-sm text-gray-500 text-center py-3">
          {t("pendingUsers.noPendingApprovals")}
        </p>
      ) : (
        <>
          {pendingEmployees.slice(0, 3).map((emp: any) => (
            <ApprovalCard
              key={emp.id}
              id={emp.id}
              name={emp.name}
              unit={emp.unit}
              time={emp.createdAt}
              onApprove={(id) => approveMutation.mutate(id)}
              onReject={(id) => rejectMutation.mutate(id)}
              onClick={(id) => navigate(`/employees/${id}`)}
            />
          ))}

          {/* Review All */}
          <button
            onClick={() => {
              
              navigate("/record-management/employees/pending");
            }}
            className="w-full text-sm text-blue-600 hover:underline pt-2"
          >
            {t("pendingUsers.reviewAll")}
          </button>
        </>
      )}
    </div>
  );
};

export default UserApprovalDropdown;