<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { inject } from 'vue'
import { useFieldError } from 'vee-validate'
import { AlertCircle } from 'lucide-vue-next'
import { cn } from '~/lib/utils'
import type { FormItemContext } from '.'
import { FORM_ITEM_INJECT_KEY } from '.'

/**
 * FormMessage component - Displays validation error messages
 * Only renders when there is an error for the associated field
 * Includes orange AlertCircle icon for better accessibility
 */

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()

// Get the form item context for ID
const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)

// Get the field error message from the nearest parent field
const error = useFieldError()
</script>

<template>
  <Transition
    enter-active-class="transition-all duration-200 ease-out"
    enter-from-class="opacity-0 -translate-y-1"
    enter-to-class="opacity-100 translate-y-0"
    leave-active-class="transition-all duration-150 ease-in"
    leave-from-class="opacity-100 translate-y-0"
    leave-to-class="opacity-0 -translate-y-1"
  >
    <p
      v-if="error"
      :id="`${formItemContext?.id}-message`"
      :class="cn('form-error', props.class)"
    >
      <AlertCircle class="h-6 w-6 text-warning flex-shrink-0" />
      <span>{{ error }}</span>
    </p>
  </Transition>
</template>
