<template>
    <view class="spe-label" :style="{ backgroundColor }" @click="handleClick">
        <text class="label-text" :style="{ color: textColor, fontSize: size }">{{ text }}</text>
    </view>
</template>

<script setup lang="ts">
const props = defineProps({
    text: {
        type: String,
        required: true,
    },
    textColor: {
        type: String,
        default: '#333',
    },
    backgroundColor: {
        type: String,
        default: '#f7f7f7',
    },
    size: {
        type: String,
        default: '26rpx',
    },
    id: {
        type: [String, Number],
        required: true,
    },
});

const emit = defineEmits<{
    click: [text: string];
}>();

const handleClick = () => {
    emit('click', props.text);
};
</script>

<style lang="scss" scoped>
.spe-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10rpx 32rpx;
    border-radius: 8rpx;
    min-height: 40rpx;
    cursor: pointer;
}

.label-text {
    font-size: 24rpx;
    line-height: 1.4;
}

.close-icon {
    position: absolute;
    top: -8rpx;
    right: -8rpx;
    cursor: pointer;
}
</style>
