import { useGlobalContext } from '@/context/Provider';
import { useGoogleLogin } from '@react-oauth/google';
import google from "@/assets/images/google.png"
import { Button } from '../ui/button';


const CustomGoogleLoginButton: React.FC = () => {


    const { loginWithSocial } = useGlobalContext()
    const signIn = useGoogleLogin({
        onSuccess: (response: any) => {
            if (response?.access_token) {
                loginWithSocial("GOOGLE", response?.access_token, "access_token")
            } else {
                loginWithSocial("GOOGLE", response?.credential, "credential")
            }
        },
        onError: (error) => {
            console.error('Google login failed', error);
        }
    });



    return (
        <>
            {/* <button
                type='button'
                style={{
                    background: "linear-gradient(90.39deg, #AE6BFF 0%, #EF87DF 100%)",
                    color: '#000',
                    width: "100%",
                    border: 'none',
                    padding: '8px 20px',
                    borderRadius: '20px',
                    cursor: 'pointer',
                    fontSize: '15px',
                    height: 43,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
                onClick={() => signIn()}
            >
                <div className='d-flex align-items-center justify-content-center'><img
                    src={googlelogo.src}// Google logo
                    className='google-icon '
                    alt="Google logo"
                    style={{ width: '20px', height: '144px', marginRight: '16px' }}
                    loading="lazy"
                />
                    <span style={{fontSize:"15px"}} className='text-white google-text fw-semibold text-center'>Continue with Google</span></div>

            </button> */}
            <Button className="bg-transparent border-0 shadow-none p-0" onClick={() => signIn()}><img src={google.src} alt="google" /></Button>
        </>
    );
};
export default CustomGoogleLoginButton;