import React, { Component } from 'react';
import withMouse from './withMouseHoc';
import Mouse from './MouseRenderProps';

const containerStyle = {
  fontSize: '15px',
  textAlign: 'center',
  border: '2px solid red',
  width: '200px',
  height: '200px'
};

const AppHoc = props => {
  return (
    <div>
      <div style={containerStyle} onMouseMove={props.handleMouseMove}>
        coordinate locator
      </div>
      <span>the coordinates are {`X:${props.x} Y:${props.y}`}</span>
    </div>
  );
};
//this will expose the HOC wrapped component
//export default withMouse(AppHoc);

const AppRndrProp = props => {
  return (
    <div>
      <Mouse>
        {(mouseProps, handleMouseMove) => (
          <div>
            <div style={containerStyle} onMouseMove={handleMouseMove}>
              coordinate locator
            </div>
            <span>the coordinates are {`X:${mouseProps.x} Y:${mouseProps.y}`}</span>
          </div>
        )}
      </Mouse>
    </div>
  );
};
//this will expose the render props component
export default AppRndrProp;