<script setup lang="ts">
import { computed } from 'vue';
import type { AdminLocale } from '../i18n/admin-messages';

const LOCALE_COUNTRY: Record<AdminLocale, string> = {
  'zh-CN': 'cn',
  'en-US': 'us',
  'ms-MY': 'my',
};

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

const countryCode = computed(() => {
  const code = props.locale as AdminLocale;
  return LOCALE_COUNTRY[code] ?? 'us';
});

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

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

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