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

import { X } from 'lucide-vue-next'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import type { Transaction } from '@/pages/agent/finance/data/schema'

const props = defineProps<{
  table: Table<Transaction>
  typeFilter?: string
}>()

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

const { t } = useI18n()

const typeModel = computed({
  get: () => props.typeFilter || undefined,
  set: (value: string) => emit('update:typeFilter', value || ''),
})

const typeOptions = computed(() => [
  { label: t('agent.finance.types.recharge'), value: 'recharge' },
  { label: t('agent.finance.types.consume'), value: 'consume' },
  { label: t('agent.finance.types.refund'), value: 'refund' },
])
</script>

<template>
  <div class="flex items-center gap-2">
    <UiSelect v-model="typeModel" class="w-[120px]">
      <UiSelectTrigger>
        <UiSelectValue :placeholder="t('agent.finance.allTypes')" />
      </UiSelectTrigger>
      <UiSelectContent>
        <UiSelectItem v-for="opt in typeOptions" :key="opt.value" :value="opt.value">
          {{ opt.label }}
        </UiSelectItem>
      </UiSelectContent>
    </UiSelect>
    <button
      v-if="typeFilter"
      class="inline-flex items-center justify-center rounded-md size-6 text-muted-foreground hover:text-foreground transition-colors"
      @click="emit('update:typeFilter', '')"
    >
      <X class="size-3.5" />
    </button>
  </div>
</template>
