'use client';


import { Select } from "../Select/Select.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
import { useIntlayer } from "react-intlayer";

//#region src/components/Pagination/NumberItemsSelector.tsx
const NumberItemsSelector = ({ value, onValueChange, min = 5, max = 500 }) => {
	const { numberItemsSelector, selectPageSize } = useIntlayer("pagination");
	const items = [
		1,
		2,
		5,
		10,
		20,
		50,
		100,
		200,
		500,
		1e3,
		2e3,
		5e3,
		1e4,
		1e5
	].filter((item) => item >= min && item <= max);
	return /* @__PURE__ */ jsxs("div", {
		className: "flex items-center gap-2",
		children: [/* @__PURE__ */ jsx("span", {
			className: "text-neutral-600 text-sm dark:text-neutral-400",
			children: numberItemsSelector
		}), /* @__PURE__ */ jsxs(Select, {
			value,
			onValueChange,
			children: [/* @__PURE__ */ jsx(Select.Trigger, {
				className: "w-20",
				children: /* @__PURE__ */ jsx(Select.Value, { placeholder: selectPageSize })
			}), /* @__PURE__ */ jsx(Select.Content, { children: items.map((item) => /* @__PURE__ */ jsx(Select.Item, {
				value: item.toString(),
				children: item
			}, item)) })]
		})]
	});
};

//#endregion
export { NumberItemsSelector };
//# sourceMappingURL=NumberItemsSelector.mjs.map