<template>
  <label class="vm-inline-search">
    <i class="ri-search-line" aria-hidden="true" />
    <input
      :value="modelValue"
      type="search"
      :placeholder="placeholder ?? crudLabel('search')"
      @input="onInput"
      @keydown.enter="emit('search')"
    />
  </label>
</template>

<script setup lang="ts">
import { crudLabel } from '../crud/style'
defineOptions({ name: 'vm-inline-search' })

withDefaults(
  defineProps<{
    modelValue?: string
    placeholder?: string
  }>(),
  {
    modelValue: '',
    placeholder: undefined,
  },
)

const emit = defineEmits<{
  'update:modelValue': [v: string]
  search: []
}>()

function onInput(e: Event) {
  emit('update:modelValue', (e.target as HTMLInputElement).value.trim())
}
</script>

<style lang="scss" scoped>
.vm-inline-search {
  display: flex;
  height: 36px;
  min-width: 220px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 12px;
  background: var(--card);
  color: var(--muted-foreground);

  input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--foreground);
    font-size: 13px;
    outline: none;
  }
}
</style>
