import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import type { AvailableLocale } from '@/i18n'
import { AVAILABLE_LOCALES, changeLocale, isAvailableLocale } from '@/i18n'

export function useLocale() {
  const { locale, t } = useI18n()

  const currentLocale = computed(() => locale.value as AvailableLocale)
  
  const locales = computed(() => 
    AVAILABLE_LOCALES.map(code => ({
      code,
      name: t(`locales.${code}`),
      flag: getFlagEmoji(code)
    }))
  )

  async function setLocale(newLocale: string) {
    if (isAvailableLocale(newLocale)) {
      await changeLocale(newLocale)
    }
  }

  // Helper function to get flag emoji from locale code
  function getFlagEmoji(locale: string): string {
    const flagMap: Record<string, string> = {
      'en': '🇬🇧',
      'es': '🇪🇸',
      'fr': '🇫🇷',
      'de': '🇩🇪',
      'zh': '🇨🇳'
    }
    return flagMap[locale] || '🌐'
  }

  return {
    currentLocale,
    locales,
    setLocale,
    isAvailableLocale
  }
}