import * as React from 'react';
import {CounterText} from './CounterText';
import {PurePagination} from './PurePagination';
import {FlexBlock} from '../flexBlock/FlexBlock';

type PurePaginationWithCounterProps = {
    activePage: number;
    pageSize: number;
    total: number;
    onChangePage: (pageNumber: number) => void;
    onChangePageSize: (pageSize: number) => void;
}

export const PurePaginationWithCounter = (props: PurePaginationWithCounterProps) => {
    const {activePage, pageSize, total, onChangePage, onChangePageSize} = props;

    return (
        <FlexBlock align={FlexBlock.CENTER} justify={FlexBlock.SPACE_BETWEEN}>
            <CounterText counter={total} />
            <PurePagination
                itemsCount={total}
                pageSize={pageSize}
                activePage={activePage}
                onChangePage={onChangePage}
                onChangePageSize={onChangePageSize}
            />
        </FlexBlock>
    );
};

PurePaginationWithCounter.displayName = 'PurePaginationWithCounter';
