import { h, Component } from 'preact';

import PopupContainer from '../popup-container/popup-container';

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

export default class PopupRule extends Component<any, any> {
  render() {
    const { onClickClose = (() => {}), ruleTitle, ruleContent = [] } = this.props;
    // 把ruleContent处理成字符串数组
    // const ruleContent = [
    //   '比赛规则',
    //   '1.标题',
    //   '1.1内容',
    //   '1.2内容',
    //   '2.标题',
    //   '2.1内容',
    //   '2.2内容',
    // ];

    return (
      <PopupContainer
        title={ruleTitle}
        size='big'
        onClickClose={onClickClose}
      >
        <div className={styles['rule-warp']}>
          {
            ruleContent.map((value, index) => (
              <text
                key={index}
                className={styles['rule-content']}
              >
                {value}
              </text>
            ))
          }
        </div>
      </PopupContainer>
    );
  }
}