import React, { Component, Fragment } from 'react';
import { observer, inject } from 'mobx-react';

@inject("store")
@observer
class CityBanner extends Component {

    constructor(props) {
        super(props);
        this.state = {
            size: 0
        };
    }

    onChangeCategory = (e) => {
        // const title = e.target.value;
        // const selected = this.props.category.filter(c => c.title === title)[0];
        this.setState({
            // size: selected.size
        })
    }

    render() {
        return (
            <Fragment>
                <div className="holly-content-padding">
                    {this.props.category.length > 0 &&
                        <select onChange={this.onChangeCategory}>
                            {this.props.category.map(c => (
                                <option key={c.id} value={c.id}>{c.title}</option>
                            ))}
                        </select>
                    }
                    {/* <h2>{`${this.state.size===0 ? 'All' : this.state.size} Tours & Activities`}</h2> */}
                </div>
            </Fragment>
        )
    }
}

export default CityBanner;
