import cx from 'classnames';
import { Component } from 'react';

export default class Counter extends Component {
    constructor (props) {
        super(props);
        this.state = {
            count: 42
        };

        this.increment = this.increment.bind(this);

    }

    increment () {
        this.setState((state, props) => ({
            count: state.count + 1
        }));
    }

    render() {
        return (
            <>
                <div>
                    <h2>Counter</h2>
                    <h2 className="counter">{this.state.count}</h2>
                    <button className="counter-button" onClick={this.increment}>Click</button>
                </div>
                <style>{`
                    .counter-button {
                        font-size: 1rem;
                        padding: 5px 10px;
                        color:  #585858;
                    }
                `}</style>
            </>
        );
    }
}