<template>
  <label
      :for="field"
      class="block space-y-2xsSpace text-sm font-medium leading-none text-gray-700 relative"
  >
    <span
        v-if="labelText || $slots.label"
        class="v-field-label inline-block mb-2"
    >
      <template v-if="$slots.label">
        <slot name="label"></slot>
      </template>
      <template v-else>
        {{ labelText }}
        <span v-if="isRequired"> *</span>
      </template>
    </span>
    <slot />
    <span class="absolute right-0 -bottom-6 text-sm text-gray-600 font-normal" v-if="limit">
      {{ value?.length }}/{{ limit }} characters
    </span>
    <span class="absolute left-0 -bottom-6 text-sm text-gray-600 font-normal" v-if="showCount">
      Word count: {{ value }}
    </span>
  </label>
</template>

<script setup>
const props = defineProps({
  field: {
    type: String,
    required: true,
  },
  labelText: {
    type: String,
    default: "",
  },
  value: {
    type: [String, Number],
    default: "",
  },
  limit: {
    type: Number,
    default: null,
  },
  showCount: {
    type: Boolean,
    default: false,
  },
  darkTheme: {
    type: Boolean,
    default: false,
  },
  isRequired: {
    type: Boolean,
    default: false,
  },
});
</script>