<script setup lang="ts">
import AppIcon from '@/components/ui/AppIcon.vue'

const props = defineProps<{
  modelValue: string
  placeholder?: string
}>()
const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
</script>

<template>
  <div class="search-wrap">
    <AppIcon class="search-icon" icon="search" :size="15" />
    <input
      class="search-input"
      type="text"
      :value="props.modelValue"
      :placeholder="placeholder ?? 'Поиск...'"
      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
    />
  </div>
</template>

<style scoped>
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 12px;
  color: var(--color-text-secondary);
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 10px 16px 10px 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-glass);
  background: var(--color-white-a70);
  backdrop-filter: blur(8px);
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-a15);
}
.search-input::placeholder {
  color: var(--color-text-secondary);
}
</style>
