import React, { useState, useEffect } from "react";
import logo from "../image/radius.png";
import { FlexAJ, P } from "../css/layout";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Img = styled.img`
   {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 25px;
  }
`;

const Prag = styled.p`
   {
    color: #333;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    height:18px;
  }
`;

export default (props) => {
  const list = props.plate;

  return (
    <div className="doubleItems">
      {list && list.length > 0
        ? list.map((item, key) => {
            return (
              <Link
                to={`/forums/theme/${item.id}`}
                style={{
                  borderBottom:
                    key === list.length - 2 && list.length % 2 === 0
                      ? "none"
                      : "",
                }}
              >
                <Img src={item && item.picture ? item.picture : logo} />
                <div className="flex1"style={{width:"0"}}>
                  <div style={{display:"flex"}}>
                    <P style={{maxWidth:"370px"}}>{item.title}</P>
                    <span className="ml15" style={{fontSize:"14px",color:"#999"}}>帖子数：{item.memos_count}</span>
                  </div>
                  <Prag>{item.description || <span className="grey-9">暂无描述~</span>}</Prag>
                  <FlexAJ style={{ fontSize: "12px" }}>
                    <span>版主：{item.user_name}</span>
                  </FlexAJ>
                </div>
              </Link>
            );
          })
        : ""}
    </div>
  );
};
