<script setup lang="ts">
const value = defineModel('value')

const props = defineProps<{
  label?: string
  required?: boolean
  description?: string
  width?: '0' | '25' | '50' | '100'
}>()
</script>

<template>
  <div>
    <div v-if="props.label" class="d-flex align-end ga-2">
      <div>
        <span>{{ props.label }}</span>
        <span v-if="props.required" class="text-error">*</span>
      </div>
      <span v-if="props.description" class="text-caption">{{ props.description }}</span>
    </div>
    <v-text-field
      v-model:model-value="value"
      :class="`w-${props.width ?? 100}`"
      hide-details
      :placeholder="props.label"
    ></v-text-field>
  </div>
</template>

<style scoped lang="scss"></style>
