"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { Button } from '../../../../../../../ui/src/components/button.mjs';
import { ChevronRight } from 'lucide-react';

function Pagination({
  total,
  showing,
  hasMore,
  isLoadingMore,
  onLoadMore,
  labels = {}
}) {
  const {
    showing: showingLabel = "Showing {count} of {total}",
    next = "Load More"
  } = labels;
  const showingText = showingLabel.replace("{count}", String(showing)).replace("{total}", String(total));
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-4", children: [
    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: showingText }),
    hasMore && /* @__PURE__ */ jsxs(
      Button,
      {
        variant: "outline",
        size: "sm",
        onClick: onLoadMore,
        disabled: isLoadingMore,
        children: [
          isLoadingMore ? "Loading..." : next,
          /* @__PURE__ */ jsx(ChevronRight, { className: "ml-2 h-4 w-4" })
        ]
      }
    )
  ] });
}

export { Pagination };
