import React, { Component } from 'react';
import { Icon, Button } from 'semantic-ui-react'

class Suggestions extends Component {

	constructor(...props){
    super(...props);

    this.state = {
      suggestions: this.props.suggestions
    }

  }

	render(){

		let filteredList = suggestions;
		console.log(filteredList);

		if(this.state.suggestions) {

		        filteredList = filteredList.slice(0, 3);
		}

		console.log(filteredList);

		return(

			<section className="suggestions">
				<ul className="suggestions_list suggestions_lis_ul">

					<li className="listitem">
						<div className="header">
							<h2 className="title">SUGESTÕES PARA TI</h2>
							<a href="/suggestions_all" className="see_all">Ver tudo
							<Icon disabled name='chevron right' size='small' color='blue'/>
							</a>
						</div>
					</li>


					{filteredList.map((suggestion, key) =>
						<Suggestion
							key={key}
							suggestion={suggestion.id}
							title={suggestion.title}
							desc={suggestion.desc}
							night={suggestion.night}
							from={suggestion.from}
							img={suggestion.img}/>
					)}

				</ul>

			</section>

		)
	}
}

class Suggestion extends Component {
	render(){
		return (
					<li className="listitem">
						<div className="header_user">
							<div className="header_user_box">
								<div className="box">
									<a className="img_box img_box_flex"><img className="user_img" src={this.props.img} /></a>
									<div className="user_info">
										<div className="user_name_bold">
											<a className="user_name user_name_top">{this.props.title}</a>
										</div>
										<div className="user_name_small">
											{this.props.desc}
										</div>
									</div>
									<div className="button button_blue">
										<span className="button_right">
											<Button primary>Seguir</Button>
										</span>
									</div>
								</div>
							</div>
						</div>
					</li>
		)
	}
}




export const suggestions = [

    {
      id: 1,
      title: 'Mexico',
      desc: 'Riviera Maya',
      night: 4,
      from: 1285,
      img: 'http://viajante-abreu.com/assets/Toulun.jpg'
    },
    {
      id: 2,
      title: 'Costa Rica',
      desc: 'Costa Rica Tour',
      night: 2,
      from: 485,
      img: 'https://img.buzzfeed.com/buzzfeed-static/static/2014-08/6/20/campaign_images/webdr11/12-places-to-stay-in-costa-rica-you-wont-believe--2-18025-1407370355-5_dblbig.jpg'
    },
        {
      id: 3,
      title: 'Mexico',
      desc: 'Riviera Maya',
      night: 4,
      from: 1285,
      img: 'http://viajante-abreu.com/assets/Toulun.jpg'
    }

]


export default Suggestions;