<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { inject } from 'vue'
import { cn } from '~/lib/utils'
import type { FormItemContext } from '.'
import { FORM_ITEM_INJECT_KEY } from '.'

/**
 * FormDescription component - Help text for form fields
 * Provides additional context or instructions for the user
 */

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

const props = defineProps<Props>()

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

<template>
  <p
    :id="`${formItemContext?.id}-description`"
    :class="cn('text-sm text-muted-foreground', props.class)"
  >
    <slot />
  </p>
</template>
