<template>
  <div>
    <div v-if="user">
      <img :src="user.picture" :alt="user.name" />
      <p>{{ user.name }}</p>
      <p>{{ user.email }}</p>
    </div>
    <div v-else>
      <GoogleLogin :callback="callback"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null
    };
  },
  methods: {
    loginWithGoogle() {
      // Perform Google login and trigger the callback
      // Assuming your login mechanism triggers the provided callback
      // For demonstration purposes, let's assume it updates user data directly
      const response = { /* Assume response from Google login */ };
      this.callback(response);
    },
    callback(response) {
      // Decode credential and update user data
      const userData = this.decodeCredential(response.credential);
      this.user = userData;
    },
    decodeCredential(credential) {
      // Your implementation to decode the credential
      // For demonstration, assume it returns user data directly
      return {
        name: "John Doe",
        picture: "https://example.com/user.jpg",
        email: "john@example.com"
      };
    }
  }
};
</script>