<script setup lang="ts">
const { variant, variants, matrixPath } = useContent()
const { preferVariant } = useContentPreference()

const candidates = computed(() => variants.filter(v => v.code !== variant.value))
</script>

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