import { observer } from 'mobx-preact';
import { Component, h } from 'preact';

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


@observer
class PMGMatchTitle extends Component<any, any> {
  render() {
    // title 左侧标题
    // onClose 关闭按钮点击事件
    // leftChildSlot 左侧子元素
    // rightChildSlot 右侧子元素
    const { titleInfo, onClose } = this.props;
    return (
      <div className={styles['pmg-header']}>
        <div className={styles['pmg-header-left']}>
          {/* 赛事名称最多十五字 */}
          <div className={styles['pmg-header-title']}>
            <text className={styles['pmg-header-title-text']}>{titleInfo.title}</text>
          </div>
          <div className={styles['pmg-header-left-child']}>
            {titleInfo.leftSlot}
          </div>
        </div>
        <div className={styles['pmg-header-right']}>
          <div className={styles['pmg-header-right-child']}>
            {titleInfo.rightSlot}
          </div>
          <div
            className={styles['pmg-close-img']}
            onClick={onClose}
          />
        </div>
      </div>
    );
  }
}

export default PMGMatchTitle;