<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(20 8% 60%);
}

.field-input {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(20 8% 18%);
  background: hsl(20 8% 6%);
  color: white;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.field-input:focus {
  outline: none;
  border-color: hsl(12 76% 48% / 0.5);
}
</style>
