export function WechatQrDisplay({
  qrDataUrl,
  wxLoginContainerId,
  wxLoginReady,
  loading,
  expired,
  onRefresh,
  tip,
}: {
  qrDataUrl?: string | null;
  wxLoginContainerId?: string;
  wxLoginReady?: boolean;
  loading: boolean;
  expired: boolean;
  onRefresh: () => void;
  tip?: string;
}) {
  const useWxLogin = Boolean(wxLoginContainerId);

  return (
    <div className="login-wechat-scan-body">
      {loading && !qrDataUrl && !wxLoginReady && (
        <div className="login-wechat-scan-loading">正在生成二维码…</div>
      )}
      {useWxLogin ? (
        <div className="login-wechat-scan-qr-wrap">
          <div
            id={wxLoginContainerId}
            className={`login-wechat-wxlogin${expired ? ' is-expired' : ''}`}
          />
          {expired && (
            <button
              type="button"
              className="login-wechat-scan-expired-mask"
              onClick={onRefresh}
              aria-label="二维码已过期，点击刷新"
            >
              <span className="login-wechat-scan-expired-text">二维码已过期</span>
              <span className="login-wechat-scan-expired-action">点击刷新</span>
            </button>
          )}
        </div>
      ) : (
        qrDataUrl && (
          <div className="login-wechat-scan-qr-wrap">
            <img
              src={qrDataUrl}
              alt="微信扫码登录"
              className={`login-wechat-scan-qr${expired ? ' is-expired' : ''}`}
            />
            {expired && (
              <button
                type="button"
                className="login-wechat-scan-expired-mask"
                onClick={onRefresh}
                aria-label="二维码已过期，点击刷新"
              >
                <span className="login-wechat-scan-expired-text">二维码已过期</span>
                <span className="login-wechat-scan-expired-action">点击刷新</span>
              </button>
            )}
          </div>
        )
      )}
      <p className="login-wechat-scan-tip">
        {expired ? (
          <button type="button" className="login-link" onClick={onRefresh}>
            刷新二维码
          </button>
        ) : (
          tip ?? '请使用微信扫一扫'
        )}
      </p>
    </div>
  );
}