<script setup lang="ts">
import { isEmoji } from '~/src/helpers.ts';

const base = ref('');

const path = computed((): string | null => {
    if (!isEmoji(base.value)) {
        return null;
    }
    return base.value;
});
</script>

<template>
    <PronounsGenerator type="emoji" :path="path" disclaimer>
        <div class="form-group">
            <label for="emojiPronounsBase"><T>pronouns.emoji.base</T></label>
            <input
                id="emojiPronounsBase"
                v-model="base"
                class="form-control"
            >
        </div>
    </PronounsGenerator>
</template>
