<script setup lang="ts">
import { computed } from 'vue';
import { getLocaleDisplay } from '../utils/localeDisplay';

const props = withDefaults(
  defineProps<{ locale: string; size?: number }>(),
  { size: 20 },
);

const countryCode = computed(() => getLocaleDisplay(props.locale).countryCode);
const src = computed(() => `/flags/${countryCode.value}.svg`);
</script>

<template>
  <img
    :src="src"
    :width="size"
    :height="Math.round(size * 0.67)"
    class="locale-flag"
    :alt="countryCode"
  />
</template>

<style scoped>
.locale-flag {
  display: block;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
</style>
