// packages/block-editor/src/components/block-patterns-paging/index.js
import {
  __experimentalVStack as VStack,
  __experimentalHStack as HStack,
  __experimentalText as Text,
  Button
} from "@wordpress/components";
import { __, _x, _n, sprintf } from "@wordpress/i18n";
import { jsx, jsxs } from "react/jsx-runtime";
function Pagination({
  currentPage,
  numPages,
  changePage,
  totalItems
}) {
  return /* @__PURE__ */ jsxs(VStack, { className: "block-editor-patterns__grid-pagination-wrapper", children: [
    /* @__PURE__ */ jsx(Text, { variant: "muted", children: sprintf(
      // translators: %s: Total number of patterns.
      _n("%s item", "%s items", totalItems),
      totalItems
    ) }),
    numPages > 1 && /* @__PURE__ */ jsxs(
      HStack,
      {
        expanded: false,
        spacing: 3,
        justify: "flex-start",
        className: "block-editor-patterns__grid-pagination",
        children: [
          /* @__PURE__ */ jsxs(
            HStack,
            {
              expanded: false,
              spacing: 1,
              className: "block-editor-patterns__grid-pagination-previous",
              children: [
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "tertiary",
                    onClick: () => changePage(1),
                    disabled: currentPage === 1,
                    "aria-label": __("First page"),
                    size: "compact",
                    accessibleWhenDisabled: true,
                    className: "block-editor-patterns__grid-pagination-button",
                    children: /* @__PURE__ */ jsx("span", { children: "\xAB" })
                  }
                ),
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "tertiary",
                    onClick: () => changePage(currentPage - 1),
                    disabled: currentPage === 1,
                    "aria-label": __("Previous page"),
                    size: "compact",
                    accessibleWhenDisabled: true,
                    className: "block-editor-patterns__grid-pagination-button",
                    children: /* @__PURE__ */ jsx("span", { children: "\u2039" })
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ jsx(Text, { variant: "muted", children: sprintf(
            // translators: 1: Current page number. 2: Total number of pages.
            _x("%1$s of %2$s", "paging"),
            currentPage,
            numPages
          ) }),
          /* @__PURE__ */ jsxs(
            HStack,
            {
              expanded: false,
              spacing: 1,
              className: "block-editor-patterns__grid-pagination-next",
              children: [
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "tertiary",
                    onClick: () => changePage(currentPage + 1),
                    disabled: currentPage === numPages,
                    "aria-label": __("Next page"),
                    size: "compact",
                    accessibleWhenDisabled: true,
                    className: "block-editor-patterns__grid-pagination-button",
                    children: /* @__PURE__ */ jsx("span", { children: "\u203A" })
                  }
                ),
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "tertiary",
                    onClick: () => changePage(numPages),
                    disabled: currentPage === numPages,
                    "aria-label": __("Last page"),
                    size: "compact",
                    accessibleWhenDisabled: true,
                    className: "block-editor-patterns__grid-pagination-button",
                    children: /* @__PURE__ */ jsx("span", { children: "\xBB" })
                  }
                )
              ]
            }
          )
        ]
      }
    )
  ] });
}
export {
  Pagination as default
};
//# sourceMappingURL=index.js.map
