<script setup lang="ts">
withDefaults(
  defineProps<{
    label: string
    modelValue?: string
    placeholder?: string
    type?: string
    mono?: boolean
    readonly?: boolean
  }>(),
  {
    modelValue: '',
    type: 'text',
    mono: false,
    readonly: false,
  },
)

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

<template>
  <label class="field">
    <span class="label">{{ label }}</span>
    <div class="control" :class="{ mono }">
      <input
        :type="type"
        :value="modelValue"
        :placeholder="placeholder"
        :readonly="readonly"
        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
      />
      <slot name="trailing" />
    </div>
  </label>
</template>

<style scoped>
.field {
  display: block;
  margin-bottom: 12px;
}

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-mute);
  display: block;
  margin-bottom: 6px;
}

.control {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.control:focus-within {
  border-color: var(--text-dim);
}

.control input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 13px;
  color: inherit;
  min-width: 0;
}

.control.mono input,
.control.mono {
  font-family: var(--font-mono);
}
</style>
