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

/**
 * FormLabel component - Label for form fields with error state styling
 * Automatically associates with the form control via htmlFor
 */

interface Props extends LabelProps {
  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 state from the nearest parent field
const error = useFieldError()
</script>

<template>
  <Label
    :for="formItemContext?.id"
    :class="
      cn(
        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
        error && 'text-destructive',
        props.class
      )
    "
  >
    <slot />
  </Label>
</template>
