import React from "react";
import { LOGO_192_SRC } from "../config";

/**
 * 与顶栏小 Logo 相同：在图标区域连点 5 次会触发 App 中管理员入口（onLogoTap）。
 */
export default function SplashScreen({ onLogoTap }) {
  return (
    <div className="splash">
      <div className="splash-glow" aria-hidden="true" />
      <div className="splash-content">
        {typeof onLogoTap === "function" ? (
          <button type="button" className="splash-logo-hit" onClick={onLogoTap} aria-label="SproutGate 标志，连点五次可打开管理员验证">
            <div className="splash-logo-wrap">
              <div className="splash-rings" aria-hidden="true">
                <span />
                <span />
                <span />
              </div>
              <img className="splash-logo" src={LOGO_192_SRC} alt="" width={120} height={120} decoding="async" />
            </div>
          </button>
        ) : (
        <div className="splash-logo-wrap">
          <div className="splash-rings" aria-hidden="true">
            <span />
            <span />
            <span />
          </div>
          <img className="splash-logo" src={LOGO_192_SRC} alt="SproutGate" width={120} height={120} decoding="async" />
        </div>
        )}
        <div className="splash-title">萌芽账户认证中心</div>
        <div className="splash-subtitle">加载中</div>
        <div className="splash-dots" aria-label="加载中">
          <span />
          <span />
          <span />
        </div>
      </div>
    </div>
  );
}