import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { getImageUrl } from 'educoder';
import Nodata from '../../Nodata';

const Box = styled.div`{
  padding:0px 38px;
  min-height:400px;
}`
const Div = styled.div`{
  display:flex;
  align-items: center;
  padding:25px 0px;
  border-bottom:1px solid #eee;
  &:last-child{
    border-bottom:none;
  }
}`
const Imgs = styled.img`{
  width:60px;
  margin-right:12px;
  border-radius:50%;
}`
export default (({projects}) => {
  return (
    projects && projects.length > 0 ? 
    <Box>
      {
        projects.map((item, key) => {
        return (
          <Div>
            <Imgs src={item.project && getImageUrl(`/${item.project.owner_image_url}`)}/>
            <Link to={`/${item.project.owner_login}/${item.project.identifier}`}>{item.project.name}</Link>
          </Div>
        )
        })
      }
    </Box>:<Nodata _html="暂无团队项目"/>
  )
})