<script setup>
const {color, content} = defineProps({
    color: {
        type: String,
        default: 'red',
    },
    content: {
        type: String,
        default: '内容',
    }
});
</script>

<template>
    <a-tooltip :content="content" v-if="content">
        <a-badge>
            <template v-slot:content>
                <icon-question-circle :style="{ verticalAlign: 'middle', color: 'rgb(var(--primary-6))' }"/>

                <slot v-if="$slots.icon" name="icon"></slot>
            </template>
            <a-tag :color="color" class="cursor-pointer">
                <slot></slot>
            </a-tag>
        </a-badge>
    </a-tooltip>

    <a-tag v-else :color="color" class="cursor-pointer">
        <slot></slot>
    </a-tag>
</template>

<style scoped>

</style>
