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

import type { RiskRule } from '@/pages/admin/risk-control/data/schema'

import { Input } from '@/components/ui/input'

interface DataTableToolbarProps {
  table: Table<RiskRule>
}

const props = defineProps<DataTableToolbarProps>()
</script>

<template>
  <div class="flex items-center gap-2">
    <Input
      placeholder="搜索封禁值..."
      :model-value="(props.table.getColumn('value')?.getFilterValue() as string) ?? ''"
      class="h-8 w-[200px] lg:w-[250px]"
      @update:model-value="props.table.getColumn('value')?.setFilterValue($event)"
    />
  </div>
</template>
