<template>
    <NuxtLink :to="to" :class="['btn', variantClass]">
        <slot />
    </NuxtLink>
</template>

<script setup>
    // defineProps() sert à déclarer les propriétés (props) que ton composant peut recevoir depuis l’extérieur.
    // “Ce composant attend certains paramètres qu’on lui passera.”
    const props = defineProps({
        to: {
            type: String,
            required: true
        },
        variant: {
            type: String,
            default: 'primary'
        }
    })

    // la fonction computed sert a se synchroniser chaque fois que la props variant change, ce rend dynamique la mise à jour de la variable, cela s'appelle une propriété calculée

    const variantClass = computed(() => {
      return `btn--${props.variant}`
    })
</script>

<style>

</style>