import React from 'react';
import { useAppSelector } from '../redux/hooks';
import { useMousePosition } from '../redux/hooks/useMousePosition';

const MousePosition: React.FC = () => {
  // Use the custom hook to handle mouse move events
  useMousePosition();

  // Select mouse position from Redux store
  const { x, y } = useAppSelector((state) => state.mousePosition);

  return (
    <>
      <p>
      [Mouse position;  
      X: {x} Y: {y}]
      </p>
    </>
  );
};

export default MousePosition;