import React, { Component } from "react";
import PropTypes from "prop-types";
import "./Link.scss";

const STATUS = {
  HOVERED: "hovered",
  NORMAL: "normal"
};

class Link extends Component {
  state = {
    classLink: STATUS.NORMAL
  };

  _onMouseEnter = () => {
    this.setState({ classLink: STATUS.HOVERED });
  };
  _onMouseLeave = () => {
    this.setState({ classLink: STATUS.NORMAL });
  };

  render() {
    const { page } = this.props;
    const { classLink } = this.state;
    return (
      <a
        className={classLink}
        href={page || "#"}
        onMouseEnter={this._onMouseEnter}
        onMouseLeave={this._onMouseLeave}
      >
        {this.props.children}
      </a>
    );
  }
}

Link.propTypes = {
  page: PropTypes.string
};

export default Link;