<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))
</script>

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