import React from "react";
import styles from "./index.module.scss";
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();
  const handleBack = () => {
    window.parent.postMessage('back', '*');
    console.log('传递了back');
  }

  const handleStart = () => {
    navigate('/question');
  }
  const handleRank = () => {
    navigate('/rank');
  }
  return (
    <div className={styles.home}>
      <div className="back" onClick={handleBack}><img src={require('../../assets/img/back.png')} alt="" /></div>
      <div className="title"><img src={require('../../assets/img/home_title.png')} alt="" /></div>
      <div className="content">
        游戏规则：答对更多题目耗时更少的前五名<br />将在展览结束后赠送文创书签纪念品。
      </div>
      <div className="btn-group">
        <div className="btn-start" onClick={handleStart}>开始游戏</div>
        <div className="btn-rank" onClick={handleRank}>查看排行榜</div>
      </div>
    </div>
  );
};

export default Home;