import React from 'react'
import { useSelector, useDispatch } from 'react-redux'

import { setMaxLength, setWpm } from '../store/actions'

export const Options = () => {
  const dispatch = useDispatch()
  const maxLength = useSelector(state => state.maxLength)
  const wpm = useSelector(state => state.wpm)

  return (
    <div>
      <input
        type="range"
        min="3"
        max="14"
        value={maxLength}
        onChange={e => dispatch(setMaxLength(e.target.value))}
      />
      {maxLength}
      <input
        type="range"
        min="100"
        max="1000"
        value={wpm}
        onChange={e => dispatch(setWpm(e.target.value))}
      />
      {wpm}
    </div>
  )
}