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

const variants = config.variant?.list ?? []
const candidates = computed(() => variants.filter((v) => v.code !== variant.value))

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

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

<template>
  <ULink
    v-for="candidate in candidates"
    :key="candidate.code"
    :class="classes.base"
    :to="{ path: path(undefined, { variant: candidate.code }).value, query: { freeze: 'true' } }"
    class="flex items-center justify-center"
    :active="false"
    @click="preferVariant(candidate.code)"
  >
    <Icon :name="candidate.icon" />
  </ULink>
</template>
