import { h, Component } from 'preact';

import CdnImage from '../../cdn-image/cdn-image';

import styles from './css/index.less';

class TopRank extends Component<any, any> {
  render() {
    const { avatar, num, title, pinyin } = this.props;
    return (
      <div className={`${styles['info-item']} ${styles[`info-item-${num}`]}`}>
        <div className={styles['info-left']}>
          {
            avatar && (
            <div className={styles['info-avatar-box']}>
              <CdnImage
                className={styles['info-avatar']}
                src={avatar}
              />
              <div className={styles['avatar-border']}/>
            </div>
            )
          }
        </div>
        <div className={styles['info-right']}>
          <text className={`${styles['info-title']} ${avatar && styles['info-title-name']}`}>
            {title}
          </text>
          <div className={`${styles['info-pinyin']} ${styles[`info-pinyin-${num}`]}`}>
            {pinyin}
          </div>
        </div>
        <div className={styles['info-rank-box']}>
          <div className={styles['info-rank']}></div>
          <div className={styles['info-rank-text']}>
            <text className={`${styles['info-title']} ${styles[`info-title-${num}`]}`}>
              排名
            </text>
            <div className={`${styles['info-pinyin']} ${styles[`info-pinyin-${num}`]}`}>
              PAI MING
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default TopRank;