import React, { Component } from "react";
import "./App.css";
import cat from "./iu.png";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { x: 0, y: 0 };
  }
  handleMouseMove = e => {
    this.setState({ x: e.screenX, y: e.screenY });
  };

  // handleTracking = () => <img className="App-img" src={cat} alt="cat" />;

  render() {
    const { x, y } = this.state;
    const imgStyle = {
      width: "100px",
      height: "100px",
      position: "absolute",
      top: this.state.y + "px",
      left: this.state.x + "px",
      marginTop: "-50px",
      marginLeft: "-50px"
    };

    return (
      <div className="App">
        <div className="App-header" onMouseMove={this.handleMouseMove}>
          <h3>
            <img style={imgStyle} src={cat} alt="cat" />
            coordinates:
            {x} | {y}
          </h3>
        </div>
      </div>
    );
  }
}

export default App;