import React from "react";
import styles from "./index.module.scss";
import { useNavigate } from "react-router-dom";
import StartImg from "../../assets/img/start-btn.svg"
import RankImg from "../../assets/img/rank-btn.svg"

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

  const handleStart = () => {
    navigate('/question');
    // window.location.reload()
  }
  const handleRank = () => {
    navigate('/rank', { state: { noRank: true } });
  }
  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">
        <img className="btn-start" src={StartImg} alt="开始游戏" onClick={handleStart} />
        <img className="btn-rank" src={RankImg} alt="查看排行榜" onClick={handleRank} />
      </div>
    </div>
  );
};

export default Home;
