<script lang="ts" setup>
type Generation = 'all' | '14th-gen' | 'in-stock'

interface Props {
  modelValue: Generation
  counts: { all: number; build_to_order: number; in_stock: number }
}

defineProps<Props>()

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

const tabs: Array<{ value: Generation; label: string; count: 'all' | 'build_to_order' | 'in_stock' }> = [
  { value: 'all',       label: 'All servers',         count: 'all' },
  { value: '14th-gen',  label: 'Build to Order',      count: 'build_to_order' },
  { value: 'in-stock',  label: 'In Stock — Rack inventory', count: 'in_stock' },
]
</script>

<template>
  <div class="gen-filter d-inline-flex pa-1 rounded-pill" role="radiogroup" aria-label="Filter dedicated servers">
    <button
      v-for="tab in tabs"
      :key="tab.value"
      type="button"
      role="radio"
      :aria-checked="modelValue === tab.value"
      class="gen-filter__option"
      :class="{ 'gen-filter__option--active': modelValue === tab.value }"
      @click="emit('update:modelValue', tab.value)"
    >
      <span>{{ tab.label }}</span>
      <span class="gen-filter__count">{{ counts[tab.count] }}</span>
    </button>
  </div>
</template>

<style lang="scss" scoped>
.gen-filter {
  background: rgba(var(--v-theme-surface), 0.6);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
  gap: 4px;
  backdrop-filter: blur(8px);
}

.gen-filter__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(var(--v-theme-on-surface), 0.7);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;

  &:hover:not(.gen-filter__option--active) {
    color: rgba(var(--v-theme-on-surface), 0.95);
    background: rgba(var(--v-theme-on-surface), 0.04);
  }
}

.gen-filter__option--active {
  background: rgb(var(--v-theme-primary));
  color: rgb(var(--v-theme-on-primary));
  box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.25);
}

.gen-filter__count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  letter-spacing: 0.02em;
}

.gen-filter__option:not(.gen-filter__option--active) .gen-filter__count {
  background: rgba(var(--v-theme-on-surface), 0.08);
  color: rgba(var(--v-theme-on-surface), 0.7);
}
</style>
