<script setup lang="ts">
import type { FacetCounts } from '@/api/types'

defineProps<{ facets: FacetCounts }>()

const model = defineModel<{
  team: string
  status: string
  repo: string
}>({ required: true })
</script>

<template>
  <div id="filters" class="flex flex-wrap gap-3 mb-6">
    <select
      v-model="model.status"
      class="bg-surface-light dark:bg-[#0a0f1a] border border-border-light dark:border-slate-700 text-slate-800 dark:text-slate-200 rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
    >
      <option value="">All statuses</option>
      <option v-for="(count, s) in facets.status" :key="s" :value="s">{{ s.replace('_', ' ') }} ({{ count }})</option>
    </select>

    <select
      v-model="model.repo"
      class="bg-surface-light dark:bg-[#0a0f1a] border border-border-light dark:border-slate-700 text-slate-800 dark:text-slate-200 rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
    >
      <option value="">All repos</option>
      <option v-for="(count, r) in facets.repo" :key="r" :value="r">{{ r }} ({{ count }})</option>
    </select>
  </div>
</template>
