<script setup lang="ts">
import rndString from 'crypto-random-string'

const props = defineProps<{
  label: string
  modelValue: string
  id?: string
}>()

const id = props.id ?? rndString({ length: 16, type: 'alphanumeric' })

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()
</script>

<template>
  <label :for="id" class="flex w-full">
    <span class="w-32">{{ label }}</span>
    <input
      class="border-2 border-indigo-500 bg-slate-900"
      :id="id"
      :value="modelValue"
      @input="emit('update:modelValue', $event.target.value)"
    />
    <slot></slot>
  </label>
</template>