<script setup lang="ts">
import { useForm } from '@inertiajs/vue3'
import { computed } from 'vue'
import { useAuth } from '@/composables/useAuth'
import AuthLayout from '@/layouts/AuthLayout.vue'

const { flash } = useAuth()

const form = useForm('VerifyEmailForm', {})

function resend() {
  form.post('/email/verification-notification')
}

const linkSent = computed(() => flash.status === 'verification-link-sent')
</script>

<template>
  <AuthLayout>
    <div class="flex flex-col items-center gap-4 text-center">
      <UIcon name="i-lucide-mail-check" class="text-primary size-12" />
      <h2 class="text-xl font-semibold">
        Verify your email
      </h2>
      <p class="text-muted text-sm">
        We've sent a verification link to your email address. Please check your inbox and click the link to verify your account.
      </p>

      <UAlert
        v-if="linkSent"
        color="success"
        icon="i-lucide-check-circle"
        title="A new verification link has been sent to your email address."
        class="w-full"
      />

      <UButton
        :loading="form.processing"
        :disabled="form.processing"
        variant="soft"
        block
        @click="resend"
      >
        Resend verification email
      </UButton>
    </div>
  </AuthLayout>
</template>
