<script setup lang="ts">
import Input from "./ui/Input.vue";

const model = defineModel<string>();

defineProps<{
  placeholder?: string;
}>();
</script>

<template>
  <div class="relative flex-1 min-w-48 max-w-sm">
    <svg
      class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"
      />
    </svg>
    <Input
      v-model="model"
      type="search"
      :placeholder="placeholder"
      class="pl-8"
    />
  </div>
</template>
