<script setup>
const { t, locale, setLocale } = useI18n()
const currentLocale = ref(locale.value)

const toggleLocale = () => {
  const newLocale = currentLocale.value === 'en' ? 'th' : 'en'
  setLocale(newLocale).then(() => {
    window.location.reload()
  })
}
</script>

<template>
  <ClientOnly>
    <UTooltip :text="t('ui.language.tooltip')">
      <UButton 
      @click="toggleLocale" 
      variant="outline" 
      color="neutral"
      size="sm"
      :label="t('ui.language.switch')"
      />
    </UTooltip>
    <template #fallback>
        <USkeleton class="size-8" />
    </template>
  </ClientOnly>
</template>
