import React from 'react'
import { useSelector } from '../store'
import { selectCurrentSegmentIndex, selectSegments } from '../store/selectors'

export const Progress = () => {
  const curIdx = useSelector(selectCurrentSegmentIndex)
  const segments = useSelector(selectSegments)
  return (
    <progress
      style={{ width: '100%' }}
      value={curIdx}
      max={segments.length - 1}
    />
  )
}