import React, { Component } from 'react';
import {VLType} from 'components';
import {  Link } from 'react-router';
export default class VLTypeList extends Component {
	constructor(props) {
		super(props);
	}
	render() {
		var renderVLTypesCards, vlTypesList = this.props.vlTypes || [];
		console.log('VLTypesList', this.props);
		if (vlTypesList !== undefined || vlTypesList !== null) {
			renderVLTypesCards = vlTypesList.map(function (vl, index) {
				return (
						<VLType 
							key={index}
							vl={vl}/>
				);
			}.bind(this))
		}
		return (
			<div>
				{renderVLTypesCards}
				<Link to='/iot'>
					<div className="col-xs-12 col-sm-6 col-md-4"  id="sample">
			        	<div className="panel panel-success" >
			        		<div className="panel-heading" id="heading">	
			           			<strong className="text-center">IoTy Virtual Lab</strong>
			        		</div>
			        		<div className="panel-body" id="body">
			           			<div className="col-xs-4">
			           				<img src='/images/sets/task.png' className="img-responsive thumbnail" alt='IoTy VLab'/>
			           			</div>
			        		</div>
			        	</div>
		      		</div>
	      		</Link>
			</div>
		);
	}
}
