<template>
  <input 
    type="text"
    class="text-input"
    :class="{ readonly: readonly }"
    :value="modelValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :readonly="readonly"
    @input="$emit('update:modelValue', $event.target.value)"
    @focus="$emit('focus', $event)"
    @blur="$emit('blur', $event)"
    @keydown="$emit('keydown', $event)"
  >
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
})

defineEmits(['update:modelValue', 'focus', 'blur', 'keydown'])
</script>

<style scoped>
.text-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px 16px;
  height: 48px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.text-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

.text-input::placeholder {
  color: var(--text-muted);
}

.text-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.text-input.readonly {
  cursor: default;
  opacity: 0.7;
}

.text-input.readonly:focus {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
</style>
