<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'

const { currentLocale, locales, setLocale } = useLocale()
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="ghost" size="sm" class="gap-2 w-[120px] justify-start">
        <span v-for="locale in locales" :key="locale.code">
          {{ locale.code === currentLocale ? locale.flag : '' }}
        </span>
        <span v-for="locale in locales" :key="locale.code">
          {{ locale.code === currentLocale ? locale.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>
