import { useEffect, useCallback } from 'react';
import { CharWidget } from '@char-ai/widget';

function App() {
  const handleCredentialResponse = useCallback((response) => {
    CharWidget.init({
      siteId: 'your-site-id',
      userToken: response.credential,
    });
  }, []);

  useEffect(() => {
    // Load Google Identity Services script
    const script = document.createElement('script');
    script.src = 'https://accounts.google.com/gsi/client';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);

    script.onload = () => {
      window.google.accounts.id.initialize({
        client_id: '123456789012-abcdefg.apps.googleusercontent.com',
        callback: handleCredentialResponse,
      });
      window.google.accounts.id.renderButton(
        document.getElementById('google-signin'),
        { theme: 'outline', size: 'large' }
      );
    };

    return () => {
      document.body.removeChild(script);
    };
  }, [handleCredentialResponse]);

  return <div id="google-signin" />;
}

import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
import { CharWidget } from '@char-ai/widget';

const app = initializeApp({
  apiKey: 'your-api-key',
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project',
});

const auth = getAuth(app);
const provider = new GoogleAuthProvider();

async function signIn() {
  const result = await signInWithPopup(auth, provider);
  const idToken = await result.user.getIdToken();

  CharWidget.init({
    siteId: 'your-site-id',
    userToken: idToken,
  });
}