import {
	observer
} from 'mobx-react';

@observer
export default class Horizontal extends React.Component {
	render() {
		const {
			store
		} = this.props, {
			firstCol,
			otherCols,
		} = store;
		
		return (
			<div className='horizontal'>
				<div className='first-col'>
					{
						firstCol.map( (row,index) => {
							return (
								<div className={`cell ${index === 0 ? `header` : `content`}`}>{row}</div>
							)
						})
					}
				</div>
				<div className='detail'>
					{
						otherCols.map( (col, oindex) => {
							return (
								<div className='detail-item'>
									{
										col.map( (row,index) => {
											return (
												<div className={`cell ${index === 0 ? `header`  : `content`} `}>{row}</div>
											)
										})
									}
								</div>
							)
						})
					}
				</div>
			</div>
		);
	}
}