import React, { useCallback } from 'react';
import Flex from '../flex/index.js';
import { Box } from '@chakra-ui/react';
import NumbersPaginationButton from './NumbersPaginationButton.js';

var NumbersPagination = function (_a) {
    var currentSlideIndex = _a.currentSlideIndex, numberOfSlides = _a.numberOfSlides, mainCarousel = _a.mainCarousel;
    var onClick = useCallback(function (index) {
        if (mainCarousel) {
            mainCarousel.scrollTo(index);
        }
    }, [mainCarousel]);
    var pagination = Array.from({ length: numberOfSlides }, function (_, i) { return i; });
    return (React.createElement(Box, { "aria-label": "Numbers Pagination" },
        React.createElement(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "center" }, pagination.map(function (index) { return (React.createElement(NumbersPaginationButton, { key: "slide-".concat(index), isCurrent: index === currentSlideIndex, currentPageNumber: index + 1, totalNumbers: numberOfSlides, onClick: function () { return onClick(index); } })); }))));
};

export { NumbersPagination as default };
//# sourceMappingURL=NumbersPagination.js.map
