import React, {Component} from "react";
import TestTeacher from "../../Images/teacher.jpg";
import Location from "../../Images/location.png";
import Star from "../../Images/star.png";
import ReviewImg from "../../Images/note.png";
import Calender from "../../Images/calender.png";
import RecommendIcon from "../../Images/recomended.png";
import {Link} from "react-router-dom";

export default class TutorCard extends Component{




    render() {
        return(
            <div className="main-card mb-3 card">
                <div className="row" style={{background:'#F5F4ED', marginLeft:'10px', marginRight:'10px', marginTop:'10px', marginBottom:'10px'}}>
                    <div className="col">
                        <div className="row" style={{background:'#F8F8F8'}}>
                            <div className="col-8" style={{margin:'5px', border:'solid', padding:'10px', borderColor:'#216E9B'}}>
                                <div className="row">
                                    <div className="col-4">
                                        <img src={TestTeacher} style={{width:'90px', height:'80px'}}/>
                                        <div className="row" style={{width:'80%',background:'#216E9B',
                                            marginLeft:'10px',marginTop:'5px',justifyContent:'center'}}>
                                            <h5 style={{color:'white',float:'center',marginBottom:'10px',marginTop:'5px'}}><span>{this.props.data.tutor_finalScore.toFixed(2)} %</span></h5>
                                        </div>
                                    </div>
                                    <div className="col-6" style={{margin:'0px'}}>
                                        <div className="row">
                                            <h6 style={{color:'#2D5F5D',float:'left'}}>
                                                {this.props.data.tutor_subjects.map((subject) =>{return(<span style={{display:'inLineBlock'}}>|| {subject}  </span>)})}
                                            </h6>
                                        </div>
                                        <div className="row">
                                            <h5 style={{color:'#2D5F5D'}}>{this.props.data.tutor_name}</h5>
                                        </div>
                                        <div className="row">
                                            <label style={{color:'#2D5F5D', display:'inline-block',overflow:'hidden',
                                                whiteSpace:'nowrap', textOverflow:'ellipsis'}}>{this.props.data.tutor_qualification}</label>
                                        </div>
                                        <div className="row">
                                            <div className="col-1">
                                                <img src={Location} style={{width:'20px', height:'20px', marginLeft:'-10px'}}/>
                                            </div>
                                            <div className="col" style={{display:'inline-block',overflow:'hidden',
                                                whiteSpace:'nowrap', textOverflow:'ellipsis'}}>
                                                <label style={{color:'#2D5F5D',paddingLeft:'0px', marginLeft:'-5px',float:'left',display:'inline-block',overflow:'hidden',
                                                    whiteSpace:'nowrap', textOverflow:'ellipsis'}}>
                                                    {this.props.data.tutor_main_city.map((city) =>{return(<span> {city} | </span>)})}
                                                </label>
                                            </div>

                                        </div>
                                    </div>
                                    <div className="col-1">

                                    </div>
                                </div>
                            </div>
                            <div className="col" style={{margin:'5px', border:'solid', padding:'10px', borderColor:'#216E9B'}}>
                                <div className="row">
                                    <div className="col">
                                        <div className="row">
                                            <div className="col-1">
                                                <img src={Star} style={{width:'20px', height:'20px'}}/>
                                            </div>
                                            <div className="col" >
                                                <h5 style={{float:"left"}}>{this.props.data.tutor_avg_rating.toFixed(1)}</h5>
                                            </div>
                                        </div>
                                        <div className="row">
                                            <div className="col-1">
                                                <img src={ReviewImg} style={{width:'20px', height:'20px'}}/>
                                            </div>
                                            <div className="col">
                                                <h5 style={{float:"left"}}>{this.props.data.tutor_review_count} reviews</h5>
                                            </div>
                                        </div>
                                        <div className="row">
                                            <div className="col-1">
                                                <br/>
                                                {/*<img src={Calender} style={{width:'20px', height:'20px'}}/>*/}
                                            </div>
                                            <div className="col">
                                                {/*<h5 style={{float:"left"}}>6y experience</h5>*/}
                                            </div>
                                        </div>
                                        <div className="row">
                                            <Link to={`/Home/ViewProfile/${this.props.data.tutor_id}`}> <button className="form-control"
                                                                                                                style={{background:"#216E9B", color:"white", marginLeft:'15px', marginRight:'15px'}}><b>View Profile</b></button></Link>
                                        </div>
                                    </div>
                                    <div className="col-">
                                        {this.props.data.recommended_ ?
                                        <img src={RecommendIcon} style={{width:'80px', height:'70px', float:'left', margin:'10px'}}/>
                                            :
                                            <div>
                                            </div>
                                        }
                                    </div>
                                </div>


                            </div>

                        </div>
                    </div>

                </div>

            </div>
        )
    }

}