import React from 'react';
import cx from 'classnames';

const CLASS_NAME = 'PageControls';

type Props = {
    total: number,
    current: number
};

/* eslint-disable react/no-array-index-key */
const PageControls: React.FC<Props> = ({ total, current }) => (
    <div className={ CLASS_NAME }>
        { Array(total)
            .fill(null)
            .map((_, index) => (
                <div
                    key={ index }
                    className={ cx(`${CLASS_NAME}-dot`, {
                        [`${CLASS_NAME}-dot-active`]: index === current,
                    }) }
                />
            )) }
    </div>
);
/* eslint-enable */

export default PageControls;