<template>
  <span class="country-flag" :class="{ 'country-flag--small': size === 'small' }">
    <CountryFlag
      v-if="countryCode"
      :country="countryCode"
      :size="flagSize"
      :title="getCountryName(countryCode)"
    />
    <span v-if="showName && countryCode" class="country-name">
      {{ getCountryName(countryCode) }}
    </span>
  </span>
</template>

<script setup lang="ts">
import { CountryFlag } from 'vue-country-flag-next';
import { getCountryName } from '~/utils/countries';

interface Props {
  countryCode?: string;
  showName?: boolean;
  size?: 'small' | 'medium' | 'large';
  square?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  countryCode: '',
  showName: true,
  size: 'medium',
  square: false
});

const flagSize = computed(() => {
  const sizeMap = {
    small: 'sm',
    medium: 'md', 
    large: 'lg'
  };
  
  return sizeMap[props.size];
});
</script>

<style scoped>
.country-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  vertical-align: middle;
}

.country-flag--small {
  gap: 0.25rem;
}

.country-name {
  font-size: 0.875rem;
  color: inherit;
  white-space: nowrap;
}

.country-flag--small .country-name {
  font-size: 0.75rem;
}

/* Ensure proper flag display */
:deep(.vue-country-flag) {
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
</style>
