<script setup>
import { Icon } from '@iconify/vue';
import { t } from '@/shared/i18n';
</script>

<template>
  <div class="search-box">
    <input
      class="search-input form-control"
      type="text"
      :placeholder="t('Search properties...')"
      @input="(event) => $emit('update:modelValue', event.target.value)"
    />
    <span class="search-icon">
      <Icon icon="mdi:magnify" class="icon-sm" />
    </span>
  </div>
</template>

<style lang="scss" scoped>
.search-box {
  display: flex;
  position: relative;
  background-color: #fff;
  width: 100%;

  .search-input {
    padding-left: 30px;
    width: 100%;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    
    &:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }
    
    &::placeholder {
      color: #9ca3af;
    }
  }

  .search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
  }
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
</style>
