//import { useState } from 'react'
import React from 'react'
//import { useSelector, useDispatch } from 'react-redux';
//import { RootState, AppDispatch } from './redux/store'; // replaced with hooks
import { useAppSelector, useAppDispatch } from '../redux/hooks';
import { increment, decrement, incrementByAmount } from '../redux/counter/counterSlice';

const Counter: React.FC = () => {
  //const [count, setCount] = useState(0)

  // Access the counter value from the store
  //const count = useSelector((state: RootState) => state.counter.value);
  // Get the dispatch function
  //const dispatch = useDispatch<AppDispatch>();
  
  const count = useAppSelector((state) => state.counter.value);
  const dispatch = useAppDispatch();

  return (
    <>
      {/*<button onClick={() => setCount((count) => count + 1)}>
        Hearts ❤️ {count}
      </button>*/}
      <h3>Hearts: ❤️ {count}</h3>
      <br />
      <button className="bg-indigo-600 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded-full" onClick={() => dispatch(increment())}>Increment</button>
      <button className="bg-indigo-600 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded-full" onClick={() => dispatch(decrement())}>Decrement</button>
      <br />
      <br />
      <button className="bg-indigo-600 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded-full" onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </>
  )
}

export default Counter;