<script setup lang="ts">
defineProps<{
  tabs: Array<{ id: number | null; label: string; count: number; note?: string }>
  modelValue: number | null
}>()

const emit = defineEmits<{
  'update:modelValue': [value: number | null]
}>()
</script>

<template>
  <div class="rounded-[24px] border border-violet-100 bg-[linear-gradient(180deg,#fcfaff_0%,#f8f4ff_100%)] p-4">
    <div>
      <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-violet-500">Unterkategorien</p>
      <p class="mt-1 text-sm text-slate-500">Nur die aktuell gewählte Tier-Stufe wird in der Queue gezeigt.</p>
    </div>

    <div class="mt-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
      <button
        v-for="tab in tabs"
        :key="tab.id ?? 'all'"
        type="button"
        class="rounded-[20px] border px-4 py-3 text-left transition"
        :class="modelValue === tab.id ? 'border-violet-300 bg-white text-violet-900 shadow-[0_12px_28px_rgba(168,145,214,0.14)] ring-2 ring-violet-100' : 'border-violet-100 bg-white/75 text-slate-600 hover:border-violet-200 hover:bg-white'"
        @click="emit('update:modelValue', tab.id)"
      >
        <span class="flex items-start justify-between gap-3">
          <span class="min-w-0">
            <span class="block text-sm font-semibold">{{ tab.label }}</span>
            <span v-if="tab.note" class="mt-1 block text-[11px] font-medium text-slate-500">{{ tab.note }}</span>
          </span>
          <span
            class="inline-flex min-h-8 min-w-8 items-center justify-center rounded-full border px-2 text-xs font-bold"
            :class="modelValue === tab.id ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-violet-50 text-violet-700'"
          >
            {{ tab.count }}
          </span>
        </span>
      </button>
    </div>
  </div>
</template>
