import React from 'react';
import PropTypes from 'prop-types';
import Button from '../../Button';

const BottomSlider = ({ className, currentSlide, slideCount, goToSlide }) => {
  const res = [];
  for (let index = 0; index < slideCount; index += 1) {
    res.push(
      <Button
        onClick={() => goToSlide(index)}
        variant="dash-lagoon"
        active={index === currentSlide}
        key={`Dec${index} ${slideCount}`}
      >
        {index}
      </Button>);
  }
  return (<div className={className}>{res}</div>);
};

BottomSlider.propTypes = {
  /** @ignore */
  className: PropTypes.string,
  currentSlide: PropTypes.number,
  slideCount: PropTypes.number,
  goToSlide: PropTypes.func
};

BottomSlider.defaultProps = {
  className: undefined,
  currentSlide: 0,
  slideCount: 0,
  goToSlide: null
};

export default BottomSlider;
