import classNames from 'classnames'
import state from '/src/pages/detail/state'
import styles from './index.module.less'

interface IProps {
  dots: number
  repeat?: number
}

export default (props: IProps) => {
  return (
    <div class={styles.container}>
      {Array(props.dots * (props.repeat || 1)).fill(0).map((item, index) => {
        return (
          <div class={classNames(
            styles.dot,
            {[styles.first]: index % props.dots === 0},
            {[styles.active]: state.activeTick >= 0 &&  state.activeTick === index}
          )}></div>
        )
      })}
    </div>
  )
}
