<script setup lang="ts">
const config = useContentConfig()
const { preferLocale } = useContentPreference()
const { locale, path } = useContentInjected()

const locales = config.locale?.list ?? []
const candidates = computed(() => locales.filter((l) => l.code !== locale.value))

const props = defineProps<{
  class?: string
  ux?: any
}>()

const classes = useStyling(
  'contentLocaleSwitcher',
  {
    slots: {
      base: '',
    },
  },
  props
)
</script>

<template>
  <XText
    as="link"
    :class="classes.base"
    :link-props="{
      to: { path: path(undefined, { locale: candidate.code }).value, query: { freeze: 'true' } },
      '@click': preferLocale(candidate.code),
      active: false,
      hreflang: candidate.code, // keep for SEO
    }"
    :text="candidate.code.toUpperCase()"
    v-for="candidate in candidates"
  />

  <!--  <ULink-->
  <!--    :key="candidate.code"-->
  <!--    :to="{ path: path(undefined, { locale: candidate.code }).value, query: { freeze: 'true' } }"-->
  <!--    @click="preferLocale(candidate.code)"-->
  <!--  >-->
  <!--    {{ candidate.code.toUpperCase() }}-->
  <!--  </ULink>-->
</template>
