cozsweet-frontend-nextjs/src/components/auth/google-sign-in-button.tsx

"use client";
/**
 * Google 登录按钮（GIS 渲染）
 *
 * 原始 Dart: lib/ui/auth/widgets/google_sign_in_web.dart
 *
 * 通过 `google.accounts.id.renderButton` 把 GIS 官方按钮渲染到指定 div。
 * 登录成功由 `setOnGoogleSignInSuccess` 设置的回调处理。
 */
import { useEffect, useRef } from "react";

import {
  renderGoogleButton,
  setOnGoogleSignInSuccess,
  type GoogleSignInSuccess,
} from "@/integrations/google-identity";
import styles from "./google-sign-in-button.module.css";

export interface GoogleSignInButtonProps {
  onSuccess: (success: GoogleSignInSuccess) => void;
}

export function GoogleSignInButton({ onSuccess }: GoogleSignInButtonProps) {
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    setOnGoogleSignInSuccess(onSuccess);
    return () => setOnGoogleSignInSuccess(null);
  }, [onSuccess]);

  useEffect(() => {
    if (!ref.current) return;
    let cancelled = false;
    // GIS 异步加载，轮询直到可用
    const tryRender = () => {
      if (cancelled) return;
      if (window.google?.accounts?.id) {
        renderGoogleButton(ref.current!, { theme: "outline", size: "large" });
      } else {
        setTimeout(tryRender, 100);
      }
    };
    tryRender();
    return () => {
      cancelled = true;
    };
  }, []);

  return <div ref={ref} className={styles.slot} />;
}