import React, { useState } from "react";
import { WhiteBack, AlignCenter } from "../css/layout";
import { Link } from 'react-router-dom';
import Title from "./Title";
import ring from "../image/radius.png";
import styled from "styled-components";

const Img = styled.img`
   {
    width: 40px;
    height: 40px;
    margin-right: 14px;
    border-radius: 50%;
  }
`;
const Prag = styled.p`
   {
    color: #999;
    font-size: 14px;
    line-height: 18px;
    margin: 4px 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
`;

export default ({ recommand }) => {
  return (
    <WhiteBack>
      <Title>精选板块</Title>
      <ul className="BestModalUl">
        {recommand && recommand.length > 0
          ? recommand.map((item, key) => {
              return (
                <AlignCenter>
                  <Img src={item.picture || ring} />
                  <div className="flex1" style={{ width: "0" }}>
                    <Link to={`/forums/theme/${item.id}`} className="grey-3">{item.title}</Link>
                    <Prag>{item.description || "暂无描述~"}</Prag>
                    {/* <p className="task-hide">{item.description}</p> */}
                    <span className="font-12 grey-9">{item.watchers_count}人收藏<span className="ml15">{item.memos_count}个话题</span></span>
                  </div>
                </AlignCenter>
              );
            })
          : ""}
      </ul>
    </WhiteBack>
  );
};
