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

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

export const RsvpOptions = () => {
  const maxLength = useSelector(state => state.maxLength)
  const dispatch = useDispatch()
  return (
    <div>
      <input
        type="range"
        min="3"
        max="14"
        value={maxLength}
        onChange={e => dispatch(setMaxLength(e.target.value))}
      />
      {maxLength}
    </div>
  )
}