<script setup lang="ts">
import { computed } from 'vue';
import type { Country } from '~/composables/useProductCenter';

const props = defineProps<{ countries: Country[]; activeCountryId: string | null }>();
const emit = defineEmits<{ 'update:activeCountryId': [id: string | null] }>();

const configuredCountries = computed(() => props.countries);
</script>

<template>
  <div class="country-bar" aria-label="国家筛选">
    <button type="button" class="filter-pill" :class="{ active: activeCountryId === null }" @click="emit('update:activeCountryId', null)">全部</button>
    <template v-for="country in configuredCountries" :key="country.id">
      <button type="button" class="filter-pill" :class="{ active: activeCountryId === country.id }" @click="emit('update:activeCountryId', country.id)">
        <img v-if="country.icon" :src="country.icon" :alt="country.name" class="flag" />
        {{ country.name }}
      </button>
    </template>
  </div>
</template>

<style scoped>
.country-bar { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
.filter-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 60px; background: #f2f2f2; color: #000; font-size: 16px; white-space: nowrap; cursor: pointer; }
.filter-pill.active { color: #ff6800; background: rgba(255, 104, 0, .06); }
.flag { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; }
@media (max-width: 760px) { .country-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } }
</style>
