import React from "react";
import { useNavigate } from "react-router-dom";

import { useConfig } from "@/config";

import styles from "./index.module.scss";
const NeosConfig = useConfig();

const Start: React.FC = () => {
  const navigate = useNavigate();
  return (
    <>
      <div className={styles["mycard-header"]}>
        <a href="https://mycard.moe/">
          <img
            src={`${NeosConfig.assetsPath}/mycard_logo.png`}
            alt="MyCard"
            width={130}
            height={40}
          />
        </a>
      </div>
      <div className={styles.wrapper}>
        <div className={styles["particles-container"]}>
          {Array.from({ length: 100 }).map((_) => (
            <div className={styles["particle-container"]}>
              <div className={styles["particle"]} />
            </div>
          ))}
        </div>
        <div role="banner" className={styles["neos-header"]}>
          <div>
            <h1>
              <img
                src={`${NeosConfig.assetsPath}/neos_logo.png`}
                width={540}
                height={250}
                alt="YGO NEOS"
              />
            </h1>
            <button
              onClick={() => {
                navigate("/sso");
              }}
            >
              登录萌卡进行游玩
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default Start;
