"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { CaretDown } from "../../atoms/Icon/CaretDown.js";
import { focusStyle } from "./styles.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Text } from "../../atoms/Text/Text.js";
import { Dropdown } from "../Dropdown/Dropdown.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { Flex } from "../../atoms/Flex/Flex.js";
function PaginationPageSizeSelect({
  value,
  onChange,
  options = [10, 20, 50, 100],
  total,
  disabled
}) {
  return /* @__PURE__ */ jsxs(
    Flex.Row,
    {
      align: "center",
      gap: [Spacing["8px"], null, Spacing["16px"]],
      sx: {
        position: [null, null, "absolute"],
        right: 0,
        top: "50%",
        transform: [null, null, "translateY(-50%)"]
      },
      children: [
        total ? /* @__PURE__ */ jsxs(Text.P12, { color: "White48", children: [
          "Total of ",
          total,
          " item",
          total > 1 ? "s" : null
        ] }) : null,
        /* @__PURE__ */ jsxs(Dropdown, { type: "select", value, onValueChange: onChange, children: [
          /* @__PURE__ */ jsxs(
            Dropdown.Button,
            {
              sx: {
                display: "flex",
                alignItems: "center",
                gap: Spacing["8px"],
                height: "28px",
                px: Spacing["12px"],
                borderRadius: BorderRadius.S,
                bg: "White4",
                color: "White",
                fontSize: "12px",
                "&:hover": { bg: "White16" },
                "&:active": { color: "White64" },
                "&:focus-visible": focusStyle,
                ...disabled ? { color: "White32" } : {}
              },
              children: [
                /* @__PURE__ */ jsxs("span", { children: [
                  value,
                  " per page"
                ] }),
                /* @__PURE__ */ jsx(CaretDown, {})
              ]
            }
          ),
          /* @__PURE__ */ jsx(Dropdown.Menu, { align: "end", children: options.map((option) => /* @__PURE__ */ jsxs(Dropdown.Menu.Item, { value: option, children: [
            option,
            " per page"
          ] }, option)) })
        ] })
      ]
    }
  );
}
export {
  PaginationPageSizeSelect
};
