import React from 'react'

// Redux
import { useDispatch, useSelector } from 'react-redux'
import { actionCreators as counterActionCreators, CounterState } from '../store/reducers/Counter'

interface  IReduxState {
  counter: CounterState
}

const Counter = () => {
  const dispatch = useDispatch()
  const counterState = useSelector((state: IReduxState) => state.counter)

  const increment = () => {
    // dispatch(counterActionCreators.increment())
  }

  return <>
    <h1>Counter</h1>
    <p>This is a simple example of a React component.</p>
    <p aria-live="polite">Current count: <strong>{counterState.count}</strong></p>
    <button type="button" className="btn btn-primary btn-lg" onClick={() => { increment() }}>Increment</button>
  </>
}

export {
  Counter
}