<script setup lang="ts">
defineProps<{
  svg: string
  loading: boolean
  modelValue: string
}>()

const emit = defineEmits<{
  refresh: []
  'update:modelValue': [value: string]
}>()
</script>

<template>
  <UFormField label="Captcha" required>
    <div v-if="svg" class="flex gap-2 items-start">
      <!-- eslint-disable-next-line vue/no-v-html -->
      <div
        class="flex-1 h-10 border rounded-md overflow-hidden bg-[#f8f9fa]"
        role="img"
        aria-label="CAPTCHA verification code"
        v-html="svg"
      />
      <UButton
        variant="ghost"
        color="neutral"
        :icon="'i-lucide-refresh-cw'"
        :class="{ 'animate-spin': loading }"
        :disabled="loading"
        square
        aria-label="刷新验证码"
        @click="emit('refresh')"
      />
    </div>
    <div v-else class="text-sm text-red-500">
      验证码加载失败，
      <button class="underline" @click="emit('refresh')">点此重试</button>
    </div>
    <UInput
      :model-value="modelValue"
      placeholder="Enter the code above"
      class="mt-2"
      @update:model-value="emit('update:modelValue', $event)"
    />
  </UFormField>
</template>
