'use client';
import React from 'react';
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { auth } from '@/app/firebase/config';
interface GoogleSignInButtonProps {
    onLoginSuccess?: (user: any) => void; // Callback function when login succeeds
  }
  
const GoogleSignInButton: React.FC<GoogleSignInButtonProps> = ({ onLoginSuccess }) => {
  const provider = new GoogleAuthProvider();

  const handleGoogleSignIn = async () => {
    try {
      const result = await signInWithPopup(auth, provider);
      const user = result.user;
      console.log('Google Sign-In successful:', user);
      if(onLoginSuccess){
        onLoginSuccess(user);
      }
    } catch (error: any) {
      console.error('Error during Google Sign-In:', error.message);
    }
  };

  return (
    <button
      onClick={handleGoogleSignIn}
      className="w-full py-3 bg-blue-600 text-white rounded-md hover:bg-green-500 transition duration-300 flex items-center justify-center gap-2"
    >
      <svg
        className="w-5 h-5"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 48 48"
      >
        <path
          fill="#EA4335"
          d="M24 9.5c3.6 0 6.6 1.3 9 3.9l6.7-6.7C35.2 2.8 30.1 0 24 0 14.9 0 7.2 5.5 3.5 13.4l7.9 6.2C13.4 11.1 18.2 9.5 24 9.5z"
        />
        <path
          fill="#34A853"
          d="M24 48c6.5 0 12-2.2 16-6l-7.5-6.1C30.9 38.2 27.6 39.5 24 39.5c-5.6 0-10.4-3.6-12.2-8.7l-8.1 6.3C7.2 42.7 14.6 48 24 48z"
        />
        <path
          fill="#4A90E2"
          d="M48 24c0-1.6-.2-3.1-.5-4.6H24v9h13.7c-.6 3-2.2 5.5-4.5 7.3l7.5 6.1C45.6 37.4 48 31 48 24z"
        />
        <path
          fill="#FBBC05"
          d="M11.8 30.8c-.6-1.7-1-3.5-1-5.5s.4-3.8 1-5.5l-8-6.3C1.8 16.2 0 20 0 24s1.8 7.8 4.7 10.7l7.1-3.9z"
        />
      </svg>
      Sign in with Google
    </button>
  );
};

export default GoogleSignInButton;