import React from "react";
import { Card, Col, Avatar, Tooltip } from "antd";
import { getUrl } from "educoder";
import "./user.scss";

function project_item({ project, key }) {
  const item_bottom = () => {
    return (
      <span className="project-user-bottom">
        <Tooltip title="成员数">
          <i class="iconfont icon-chengyuan mr3"></i>
          {project.members_count}
        </Tooltip>
        {project.commits_count > 0 && (
          <Tooltip title="版本库" className="ml10">
            <i class="iconfont icon-banbenku mr3"></i>
            {project.commits_count}
          </Tooltip>
        )}
      </span>
    );
  };
  return (
    <Col span={6} className="project-card-item" key={key}>
      <Card bordered={false} hoverable={true} actions={[item_bottom()]}>
        {project.is_public && (
          <span className="project-public-tip">
            <span className="publicpart"></span>
            <span className="smalltrangle"></span>
            <span className="publicword">公开</span>
          </span>
        )}
        <div class="ant-card-head">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title">
              <a href={`/projects/${project.login}/${project.identifier}`}>{project.name}</a>
            </div>
          </div>
        </div>
        <div className="project-item-user">
          <a href={`/accounts/${project.login}`}>
            <Avatar size={64} src={getUrl(project.image_url)}></Avatar>
          </a>
          <div className="mt15">
            <a href={`/accounts/${project.login}`}>{project.username}</a>
          </div>
          <div className="project-user-school">{project.school_name}</div>
        </div>
      </Card>
    </Col>
  );
}
export default project_item;
