monacousa-portal/components/CountryFlag.vue

<template>
  <span class="country-flag" :class="{ 'country-flag--small': size === 'small' }">
    <ClientOnly>
      <VueCountryFlag
        v-if="actualCountryCode"
        :country="actualCountryCode"
        :size="flagSize"
        :title="getCountryName(actualCountryCode)"
      />
      <template #fallback>
        <span class="flag-placeholder" :style="placeholderStyle">🏳️</span>
      </template>
    </ClientOnly>
    <span v-if="showName && actualCountryCode" class="country-name">
      {{ getCountryName(actualCountryCode) }}
    </span>
  </span>
</template>

<script setup lang="ts">
import VueCountryFlag from 'vue-country-flag-next';
import { getCountryName, parseCountryInput } 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
});

// Convert country name to country code if needed
const actualCountryCode = computed(() => {
  if (!props.countryCode) return '';
  
  // If it's already a 2-letter code, use it
  if (props.countryCode.length === 2) {
    return props.countryCode.toUpperCase();
  }
  
  // Try to parse country name to get the code
  const parsed = parseCountryInput(props.countryCode);
  return parsed || '';
});

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

const placeholderStyle = computed(() => {
  const sizeMap = {
    small: '1rem',
    medium: '1.5rem',
    large: '2rem'
  };
  
  return {
    width: sizeMap[props.size],
    height: props.square ? sizeMap[props.size] : `calc(${sizeMap[props.size]} * 0.75)`,
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '2px',
    backgroundColor: '#f5f5f5',
    fontSize: '0.75rem'
  };
});
</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;
}

.flag-placeholder {
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* 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>