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

<script setup lang="ts">
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 flagClasses = computed(() => {
  const classes = [];
  
  if (props.countryCode) {
    classes.push(`fi-${props.countryCode.toLowerCase()}`);
  }
  
  if (props.square) {
    classes.push('fis');
  }
  
  return classes;
});

const flagStyle = 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)`, // 4:3 aspect ratio
    display: 'inline-block',
    borderRadius: '2px',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat'
  };
});
</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 */
.fi {
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
</style>
