import {
	toJS
} from 'mobx';
import {
	observer
} from 'mobx-react';
import {isArray} from 'lodash';

@observer
export default class Vertical extends React.Component {
	render() {
		const {
			store
		} = this.props, {
			data
		} = store;

		return (
			<div className='vertical'>
				{
					isArray(toJS(data)) && data.map((item,oindex) => {
						return (
							<div className='item'>
								{
									item.map( (val,index) => {
										return (
											<div className={`${index === 0 ? 'label' : 'value'} ${oindex === data.length - 1 && 'noBorderBottom'} `}>{val}</div>
										)
									})
								}
							</div>
						)
					})
				}
			</div>
		);
	}
}