<template>
    <span>
        <span v-for="part in example.parts(pronoun, counter)">
            <strong v-if="part.variable"><Morpheme :pronoun="pronoun" :morpheme="part.str" :counter="counter" /></strong>
            <span v-else><Spelling :text="part.str" /></span>
        </span>
        <small v-if="link">
            (<nuxt-link :to="`/${pronoun.canonicalName}`"><Spelling escape :text="pronoun.canonicalName" /></nuxt-link>)
        </small>
        <Pronunciation
            v-if="pronunciation && pronoun.pronounceable && example.toPronunciationString(pronoun)"
            :pronunciation="example.toPronunciationString(pronoun)"
        />
    </span>
</template>

<script>
export default {
    props: {
        example: { required: true },
        pronoun: { required: true },
        counter: { default: 0 },
        link: { type: Boolean },
        pronunciation: { type: Boolean },
    },
};
</script>
