import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment } from 'react';
import Box from '../box';
import { useStyleConfig, vui } from '../core';
import { cs, isNumber, isString } from '../utils';
import { usePaginationContext } from './context';
import PaginationButton from './paginationButton';
import PaginationEllipsis from './paginationEllipsis';
import PaginationPrevNext from './paginationPrevNext';
/** Displays a set of page navigation buttons. */
export const PaginationNavigation = vui((props, ref) => {
    const { children, className, ...rest } = props;
    const { items } = usePaginationContext();
    const styles = useStyleConfig('Pagination', usePaginationContext());
    return (_jsx(Box, { className: cs('vui-paginationNavigation', className), gap: 1, ref: ref, wrap: true, ...styles.navigation, ...rest, children: children ??
            items.map(item => (_jsxs(Fragment, { children: [item === 'previous' && _jsx(PaginationPrevNext, { "aria-label": "previous", direction: "previous" }), isNumber(item) && _jsx(PaginationButton, { page: item }), isString(item) && item.includes('ellipsis') && _jsx(PaginationEllipsis, {}), item === 'next' && _jsx(PaginationPrevNext, { "aria-label": "next", direction: "next" })] }, item))) }));
});
PaginationNavigation.displayName = 'PaginationNavigation';
export default PaginationNavigation;
//# sourceMappingURL=paginationNavigation.js.map