text: import React from 'react'
  import GoogleLogin from 'react-google-login'
  import { useNavigate } from 'react-router-dom'
  import { FcGoogle } from 'react-icons/fc'
  
  import PapVideos from '../assets/share.mp4'
  import Logo from '../assets/PAPlogo.png'
  
  import { client } from '../client'
  
  const Login = () => {
    const navigate = useNavigate();
    const responseGoogle = (response) => {
      localStorage.setItem('user', JSON.stringify(response.profileObj))
      const { name, googleId, imageUrl } = response.profileObj
      const doc = {
        _id: googleId,
        _type: 'user',
        userName: name,
        image: imageUrl,
      };
      client.createIfNotExists(doc).then(() => {
        navigate('/', { replace: true })
      })
    }
  
    return (
      <div className='flex justify-start items-center flex-col h-screen'>
        <div className='relative w-full h-full'>
            <video
              src={ PapVideos }
              type='video/mp4'
              autoPlay
              loop
              muted
              controls={ false }
              className='w-full h-full object-cover'
            />
            <div className='absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0 bg-blackOverlay'>
              <div className='p-5'>
                 <img src={ Logo } width='250px' alt='Logo Brand' className='bg-white rounded' />
                 {/* <h1 className='text-white text-3xl font-bold'>Papdungzz</h1> */}
              </div>
              <div className='shadow-2xl'>
                <GoogleLogin
                  clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}
                  render={(renderProps) => (
                    <button
                      type="button"
                      className="flex justify-center items-center bg-white hover:bg-gray-100 text-gray-800 font-bold py-2 px-4 rounded-full"
                      onClick={renderProps.onClick}
                      disabled={renderProps.disabled}
                    >
                      <FcGoogle className="mr-4" /> Sign in with google
                    </button>
                  )}
                  onSuccess={responseGoogle}
                  onFailure={responseGoogle}
                  cookiePolicy="single_host_origin"
                />
              </div>
            </div>
        </div>
      </div>
    )
  }
  
  export default Login