const Li = styled.li`
  border: 0;

  //Set color to red if this component is selected
  ${this.state => this.state.selectedLanguage`
    color: 'red';
  `}

`;

class Popular extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedLanguage: 'All'
        }

        this.updateLanguage = this.updateLanguage.bind(this);
    }

    updateLanguage(lang) {
        this.setState(function() {
            return {
                selectedLanguage: lang
            };
        });
    }
    render() {
        const languages = ['All', 'Javascript', 'Java', 'Go', 'Rust'];
        return (
            <ul className={`list-group d-flex flex-row justify-content-center ${this.props.className}`}>
                {languages.map(function(lang){
                    return (
                        <Li
                            key={lang}
                            // style={lang === this.state.selectedLanguage ? {color: '#d00d1b'} : null}
                            onClick={this.updateLanguage.bind(null, lang)}
                            className={`list-group-item p-2 ${this.props.className}`}>
                            {lang}
                        </Li>
                    )
                }, this)}
            </ul>
        );
    }
}

export default Popular;