import React from 'react';
import ReactDOM from 'react-dom';

class StrobeLight extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            color: this.props.color,
        }
    }

    componentDidMount() {
        this.interval = setInterval(() => {
            this.setState({
                color: this.state.color === 'white' ? this.props.color : 'white',
            })
        }, this.props.frequency);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        const style = {
            height: '50px',
            width: '500px',
            backgroundColor: this.state.color,
            margin: '10px'
        }

        return <div style={ style }></div>
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <StrobeLight color="red" frequency={ 150 } />
                <StrobeLight color="blue" frequency={ 250 } />
                <StrobeLight color="green" frequency={ 50 } />
            </div>
        )
    }
}

document.addEventListener('DOMContentLoaded', function(){
    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );
});