import classNames from 'classnames'
import { Component } from 'react'

export default class LikeButton extends Component {
  constructor(props) {
    super(props);
    this.state = { liked: false, count: 100 };
  }

  onClickAddLikeHandler = () => {
    this.setState({ count: this.state.count + 1, liked: true });
  };

  onClickRemoveLikeHandler = () => {
    this.setState({ count: this.state.count - 1, liked: false });
  };

  render() {
    const { liked, count } = this.state;

    return (
      <>
        <div>
          <button
            className={classNames("like-button", { liked })}
            onClick={
              liked ? this.onClickRemoveLikeHandler : this.onClickAddLikeHandler
            }
          >
            Like | <span className="likes-counter">{count}</span>
          </button>
        </div>
        <style>{`
              .like-button {
              font-size: 1rem;
              padding: 5px 10px;
              color: #585858;
            }
  
            .liked {
              font-weight: bold;
              color: #1565c0;
            }
            `}</style>
      </>
    );
  }
}