<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

type SportCategory = 'football' | 'basketball' | 'tennis';

const SPORT_CATEGORIES = [
  { id: 'football' as const, icon: '⚽', labelKey: 'bet.sport_football', enabled: true },
  { id: 'basketball' as const, icon: '🏀', labelKey: 'bet.sport_basketball', enabled: false },
  { id: 'tennis' as const, icon: '🎾', labelKey: 'bet.sport_tennis', enabled: false },
] as const;

const { t } = useI18n();
const activeSport = ref<SportCategory>('football');

function selectSport(id: SportCategory, enabled: boolean) {
  if (!enabled) return;
  activeSport.value = id;
}
</script>

<template>
  <div class="sports-category-bar">
    <button
      v-for="sport in SPORT_CATEGORIES"
      :key="sport.id"
      type="button"
      class="sport-category"
      :class="{
        active: sport.enabled && activeSport === sport.id,
        disabled: !sport.enabled,
      }"
      :disabled="!sport.enabled"
      :aria-current="sport.enabled && activeSport === sport.id ? 'page' : undefined"
      @click="selectSport(sport.id, sport.enabled)"
    >
      <span class="sport-category-icon" aria-hidden="true">{{ sport.icon }}</span>
      <span class="sport-category-label">{{ t(sport.labelKey) }}</span>
      <span v-if="!sport.enabled" class="sport-category-soon">{{ t('bet.sport_coming_soon') }}</span>
    </button>
  </div>
</template>

<style scoped>
.sports-category-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sports-category-bar::-webkit-scrollbar {
  display: none;
}

.sport-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.sport-category:hover:not(:disabled) {
  color: var(--primary);
  background: var(--bg-hover);
}

.sport-category.active {
  color: var(--primary-light);
  background: rgba(0, 102, 204, 0.1);
  border-color: var(--border-active);
  box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.08);
}

.sport-category.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.sport-category-icon {
  font-size: 14px;
  line-height: 1;
}

.sport-category-label {
  line-height: 1.2;
}

.sport-category-soon {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.2);
}
</style>
