<script setup lang="ts">
import { NTooltip } from 'naive-ui'

/** hint：静态说明，label 后问号图标悬浮显示；error：校验 / 阻塞提示，控件下方红字；
 *  feedback：中性状态反馈（如「已读取文件」），控件下方灰字，error 存在时让位。 */
defineProps<{
  label: string
  hint?: string
  required?: boolean
  error?: string
  feedback?: string
}>()
</script>

<template>
  <div class="mb-3.5">
    <div class="mb-1.5 flex items-center gap-[5px] text-[12.5px] font-medium text-ink-2">
      <span>{{ label }}<span v-if="required" class="ml-0.5 text-err">*</span></span>
      <NTooltip v-if="hint" trigger="hover" placement="top" :style="{ maxWidth: '320px' }">
        <template #trigger>
          <span
            class="flex h-[15px] w-[15px] flex-none cursor-help items-center justify-center rounded-full border border-ink-3/70 text-[10.5px] font-semibold text-ink-3 hover:border-accent hover:text-accent"
            aria-label="字段说明"
          >
            ?
          </span>
        </template>
        <span class="text-xs leading-relaxed">{{ hint }}</span>
      </NTooltip>
    </div>
    <slot />
    <div v-if="error" class="mt-1 text-xs leading-relaxed text-err">{{ error }}</div>
    <div v-else-if="feedback" class="mt-1 text-xs leading-relaxed text-ink-3">{{ feedback }}</div>
  </div>
</template>
