<template>
  <div class="flex flex-col gap-4 border-b border-violet-100 p-5 lg:flex-row lg:items-center">
    <label class="relative block flex-1">
      <Search class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-400" />
      <input
        :value="search"
        type="text"
        class="h-11 w-full rounded-2xl border border-violet-200 bg-white pl-11 pr-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
        placeholder="Name, Handle oder Plattform suchen …"
        @input="$emit('update:search', ($event.target as HTMLInputElement).value)"
      />
    </label>
    <NativeSelect
      :model-value="categoryFilter"
      :options="categoryFilterOptions"
      @update:model-value="$emit('update:categoryFilter', $event === null ? null : Number($event))"
    />
    <NativeSelect
      :model-value="readinessFilter"
      :options="readinessFilterOptions"
      @update:model-value="$emit('update:readinessFilter', String($event))"
    />
    <Button v-if="search || categoryFilter || readinessFilter !== 'all'" variant="ghost" class="gap-1" @click="$emit('clear-filters')">
      <X class="h-4 w-4" /> Filter
    </Button>
    <Button class="gap-2" @click="$emit('open-create')">
      <UserPlus class="h-4 w-4" /> Kandidat anlegen
    </Button>
  </div>
</template>

<script setup lang="ts">
import { Search, UserPlus, X } from '@lucide/vue'

import Button from '../ui/Button.vue'
import NativeSelect from '../ui/NativeSelect.vue'

defineProps<{
  search: string
  categoryFilter: number | null
  readinessFilter: string
  categoryFilterOptions: Array<{ label: string; value: number | null }>
  readinessFilterOptions: Array<{ label: string; value: string }>
}>()

defineEmits<{
  'update:search': [value: string]
  'update:categoryFilter': [value: number | null]
  'update:readinessFilter': [value: string]
  'clear-filters': []
  'open-create': []
}>()
</script>
