import { jsx, jsxs } from "react/jsx-runtime";
import { tcx, LinkButton } from "@choiceform/design-system";
import { LoaderCircle, ArrowUp } from "@choiceform/icons-react";
import { memo } from "react";
import { t } from "../../../i18n/index.js";
import { LoadMoreButtonTv } from "./tv.js";
const LoadMoreButton = memo(function LoadMoreButton2(props) {
  const { hasMore, isLoading, onLoadMore, className, totalCount, loadedCount } = props;
  const loadingText = t("conversation", "loading");
  const loadMoreText = t("conversation", "load-more", {
    loaded: loadedCount ?? 0,
    total: totalCount ?? 0
  });
  const noMoreMessagesText = t("conversation", "no-more-messages");
  if (!hasMore) {
    return /* @__PURE__ */ jsx("div", { className: tcx("flex justify-center py-4", className), children: /* @__PURE__ */ jsx("div", { className: "text-secondary-foreground text-body-small", children: noMoreMessagesText }) });
  }
  const handleLoadMore = async () => {
    try {
      await onLoadMore();
    } catch (error) {
      console.error("Load more messages failed:", error);
    }
  };
  const tv = LoadMoreButtonTv();
  return /* @__PURE__ */ jsx("div", { className: tv.root({ className }), children: /* @__PURE__ */ jsxs(
    LinkButton,
    {
      onClick: handleLoadMore,
      disabled: isLoading,
      children: [
        isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : /* @__PURE__ */ jsx(ArrowUp, {}),
        isLoading ? loadingText : loadMoreText
      ]
    }
  ) });
});
export {
  LoadMoreButton
};
//# sourceMappingURL=load-more-button.js.map
