<template>
  <div class="field">
    <label :for="id" class="field-label">{{ label }}</label>
    <input
      :id="id"
      :value="modelValue"
      type="text"
      class="field-input"
      :placeholder="placeholder"
      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
    />
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  label: string
  modelValue: string
  placeholder?: string
}>()

defineEmits<{
  'update:modelValue': [value: string]
}>()

const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-')}`)
</script>

<style scoped>
.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--color-text-muted));
}

.field-input {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--color-surface-light));
  background: hsl(var(--color-bg));
  color: hsl(var(--color-text));
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.field-input:focus {
  outline: none;
  border-color: hsl(var(--color-primary) / 0.5);
}
</style>
