import { h, Component } from 'preact';

import MyInfoItem from '../my-info-item/my-info-item';

import TopRank from './component/top-rank';
import styles from './css/index.less';

class MatchRank extends Component<any, any> {
  render() {
    const { myInfoItem } = this.props;
    return (
      <div>
        {
          myInfoItem.rank > 3
            ? (
              <div className={styles['my-info']}>
                <MyInfoItem
                  avatar={myInfoItem.head}
                  title={myInfoItem.name}
                  pinyin="ZHANG HAO"
                />
                <div className={styles['rank-warp']}>
                  <MyInfoItem
                    num={myInfoItem.rank}
                    title="排名"
                    pinyin="PAI MING"
                  />
                </div>
              </div>
            )
            : (
              <TopRank
                avatar={myInfoItem.head}
                title={myInfoItem.name}
                pinyin="ZHANG HAO"
                num={myInfoItem.rank}
              />
            )
        }
      </div>

    );
  }
}

export default MatchRank;