<script setup lang="ts">
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import { Check } from 'lucide-vue-next'
import { useLocale } from '@/composables/useLocale'
import { computed } from 'vue'

interface Locale {
  code: string
  name: string
  flag: string
}

const { currentLocale, locales, setLocale } = useLocale()

const currentLocaleInfo = computed<Locale | undefined>(() => 
  locales.value.find((locale: Locale) => locale.code === currentLocale.value)
)
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="ghost" size="sm" class="w-[120px] justify-start">
        <span>{{ currentLocaleInfo?.flag }}</span>
        <span>{{ currentLocaleInfo?.name }}</span>
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end" class="w-[120px]">
      <DropdownMenuItem
        v-for="locale in locales"
        :key="locale.code"
        @click="setLocale(locale.code)"
        class="gap-2"
      >
        <Check
          class="h-4 w-4"
          :class="{ 'opacity-0': locale.code !== currentLocale }"
        />
        <span class="mr-2">{{ locale.flag }}</span>
        {{ locale.name }}
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

<style scoped>
.dropdown-menu-content {
  max-height: 300px;
  overflow-y: auto;
}
</style>
