import React from "react";
import { defaultValues } from "../../utils";
import { classes } from "../../Pagination.tokens";
import { SelectPerPageRoot, SelectPerPageTypography, SelectPerPageSelect } from "./PaginationSelectPerPage.styles";
export const PaginationSelectPerPage = ({ perPageValue, perPageList = defaultValues.perPageList, textPerPage = defaultValues.textPerPage, onChangeValue, size, listWidth, ...rest })=>{
    const handleSelectChange = (newValue)=>{
        if (newValue && !Array.isArray(newValue) && onChangeValue) {
            onChangeValue(Number(newValue));
        }
    };
    const transformedList = perPageList.map((num)=>({
            label: num.toString(),
            value: num.toString()
        }));
    return /*#__PURE__*/ React.createElement(SelectPerPageRoot, rest, /*#__PURE__*/ React.createElement(SelectPerPageTypography, null, textPerPage), /*#__PURE__*/ React.createElement(SelectPerPageSelect, {
        className: classes.selectWrapper,
        items: transformedList,
        value: perPageValue?.toString(),
        onChange: handleSelectChange,
        target: "button-like",
        size: size,
        listWidth: listWidth,
        flip: true,
        shift: true
    }));
};
