<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth.ts'
// import {
//   Button,
//   InputText,
//   Card,
//   InputOtp,
//   ToggleSwitch,
//   Divider,
//   IconField,
//   InputIcon,
// } from 'primevue'

const authStore = useAuthStore()

const email = ref('vadim.olonin@gmail.com')
const name = ref('Vadim')
const otp = ref('123456')

async function onSubmit() {
  await authStore.login(email.value)
}
</script>

<template>
  <div class="h-full flex flex-col justify-center items-center px-4">
    <VCard class="w-full md:w-1/2">
      <template #title>
        <div class="text-2xl">Sign in</div>
      </template>
      <template #text>
        <form @submit.prevent="onSubmit" class="flex flex-col gap-4">
          <VTextField v-model="email" placeholder="email" />
          <VTextField v-model="name" placeholder="name" />
          <div class="flex justify-center">
            <VOtpInput v-model="otp" />
          </div>
          <div class="flex items-center justify-between gap-2">
            <VSwitch hide-details label="Keep me signed in" />
            <VBtn type="submit">Sign In</VBtn>
          </div>
        </form>
      </template>
    </VCard>
  </div>
</template>

<style scoped></style>
