<script setup lang="ts">
import type { LanguageSwitcherProps } from '../types'

const { locale } = useI18n()
const switchLocalePath = useSwitchLocalePath()

withDefaults(defineProps<LanguageSwitcherProps>(), {
  small: false
})

const items = [
  [{
    label: 'Nederlands',
    icon: 'i-circle-flags-nl',
    to: switchLocalePath('nl')
  }, {
    label: 'English',
    icon: 'i-circle-flags-en',
    to: switchLocalePath('en')
  }]
]
</script>

<template>
  <div class="inline-flex relative">
    <UDropdownMenu :items="items">
      <UButton
        variant="outline"
        :label="locale.toUpperCase()"
      />
    </UDropdownMenu>
  </div>
</template>
