<script setup>
import {ref} from 'vue';
import {GoogleLogin} from "vue3-google-login";
import {useAuthStore} from '@/stores/authStore.js';
import {useTranslations} from '@/translations/translations';

const t = useTranslations();

const authStore = useAuthStore();

const errorSnackBar = ref(false);

async function googleCallback(token) {
  const response = await authStore.loginWithGoogle(JSON.stringify(token));
  if (response !== true) {
    errorSnackBar.value = true;
  }
}

</script>

<template>
  <div class="flex min-h-full justify-center items-center p-20 w-full">
    <div class="card justify-items-center">
      <img :alt="t('alt')"
           src="/images/hutopymedia/loginpage/hutopylogin.svg"/>
      <div class="flex flex-col gap-10">
        <h1 class="text-2xl font-bold login-text text-center ">
          {{ t('title') }}
        </h1>
        <div class="flex flex-col gap-4">
          <google-login :callback="googleCallback"
                        popup-type="TOKEN">
            <button class="secondary">
              <v-icon left>mdi-google</v-icon>
              Google
            </button>
          </google-login>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
