<script setup lang="ts">
import type { Table } from '@tanstack/vue-table'

import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import { Input } from '@/components/ui/input'
import type { User } from '@/pages/agent/users/data/schema'

const props = defineProps<{
  table: Table<User>
  searchFilter?: string
}>()

const emit = defineEmits<{
  'update:searchFilter': [value: string]
}>()

const { t } = useI18n()

const searchModel = computed({
  get: () => props.searchFilter,
  set: (value: string) => emit('update:searchFilter', value),
})
</script>

<template>
  <div class="flex items-center gap-2">
    <UiInput
      v-model="searchModel"
      :placeholder="t('agent.users.searchPlaceholder')"
      class="h-8 w-[200px] lg:w-[250px]"
    />
  </div>
</template>
