import React, { Component } from "react";
import "./Link.scss";
const STATUS = {
  HOVERED: "hovered",
  NORMAL: "normal"
};
type LinkProps = {
  page?: string;
};
type LinkState = {
  classLink: string;
};
class Link extends Component<LinkProps, LinkState> {
  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>
    );
  }
}
export default Link;