import React, {Component} from 'react';
import TitledCanvas from "./TitledCanvas";
import ButtonGroup from "./ButtonGroup";

interface AppState {
    color: string  // The current color that's selected by the user.
}

class App extends Component<{}, AppState> {

    constructor(props: {}) {
        super(props);
        this.state = {
            color: "blue"
        }
    }

    changeColor = (newColor: string) => {
        this.setState({
            color: newColor
        });
    };

    render() {
        return (
            <div>
                <TitledCanvas color={this.state.color} />
                <ButtonGroup onColorChange={this.changeColor} />
            </div>
        );
    }

}

export default App;