import React from 'react';
import './Component.scss';
import styled from 'styled-components';

const Img = styled.img`{
  border-radius:50%;
  width:50px;
  height:50px;
  margin-right:14px;
}`
const Name = styled.div`{
  color:#5091FF;
  font-size:16px;
  height:22px;
  line-height:22px;
  margin-bottom:7px;
}`
const Time = styled.div`{
  color:#888;
  font-size:12px;
  height:16px;
  line-height:16px;
  margin-bottom:9px;
  display:flex;
  align-item:center;
}`
const I = styled.i`{
  font-size:13px!important;
  color:#60B25E;
  margin-right:2px;
}`
const FocusBtn = styled.a`{
  display:inline-block;
  height:30px;
  line-height:26px;
  padding:0px 12px;
  background-color:#fafafa;
  border:1px solid #eee;
  border-radius:2px;
  color:#888!important;
}`
const Ifocused = styled.i`{
  font-size:16px!important;
  color:#FFA802;
  margin-right:4px;
}`
const Ifocus = styled.i`{
  font-size:16px!important;
  color:#BBBBBB;
  margin-right:4px;
}`
const Div = styled.div`{
  margin-bottom: 18px;
  padding:20px 16px;
  display: flex;
  align-items: center;
  border:1px solid #eee;
}`
export default (({img,name,time, focusStatus})=>{
  return(
    <Div>
      <Img src={img}/>
      <div className="m-infos">
        <Name>{name}</Name>
        <Time><I className="iconfont icon-shijian"></I>加入时间:{time}</Time>
        {
          focusStatus ? 
          <FocusBtn><Ifocused className="iconfont icon-shixing"></Ifocused>已关注</FocusBtn> : 
          <FocusBtn><Ifocus className="iconfont icon-kongxing"></Ifocus>关注</FocusBtn>
        }
      </div>
    </Div>
  )
})