import React from 'react'
import { useDispatch } from 'react-redux'
import {
  FiSkipBack,
  FiSkipForward,
  FiRewind,
  FiFastForward
} from 'react-icons/fi'

import { IconButton } from '../styles/IconButton'

import {
  incrementSentence,
  incrementWord,
  decrementSentence,
  decrementWord
} from '../store/actions'

export const SegmentControl = ({ children }) => {
  const dispatch = useDispatch()
  return (
    <div>
      <IconButton
        title="Previous Sentence"
        onClick={() => dispatch(decrementSentence())}
        Icon={FiRewind}
      />
      <IconButton
        Icon={FiSkipBack}
        title="Previous Word"
        onClick={() => dispatch(decrementWord())}
      />
      {children}
      <IconButton
        Icon={FiSkipForward}
        title="Next Word"
        onClick={() => dispatch(incrementWord())}
      />
      <IconButton
        Icon={FiFastForward}
        title="Next Sentence"
        onClick={() => dispatch(incrementSentence())}
      />
    </div>
  )
}
