<script setup lang="ts">
defineProps<{
  label?: string;
  error?: string;
  hint?: string;
  required?: boolean;
  fieldId?: string;
}>();
</script>

<template>
  <div class="space-y-1.5">
    <label
      v-if="label"
      :for="fieldId"
      class="inline-flex items-center text-sm font-medium leading-none text-foreground"
    >
      {{ label }}
      <span v-if="required" class="ml-0.5 text-destructive">*</span>
    </label>
    <slot />
    <p v-if="error" class="text-sm text-destructive">{{ error }}</p>
    <p v-else-if="hint" class="text-sm text-muted-foreground">{{ hint }}</p>
  </div>
</template>
