<template>
	<view class="status-tag" :class="'tag-' + tone">
		<text class="status-text">{{ text }}</text>
	</view>
</template>

<script setup lang="uts">
defineProps({
	text: {
		type: String,
		default: ''
	},
	tone: {
		type: String,
		default: 'neutral'
	}
})
</script>

<style scoped>
.status-tag {
	padding: 8rpx 20rpx;
	border-radius: 999rpx;
	align-self: flex-start;
}

.status-text {
	font-size: 24rpx;
	font-weight: 600;
}

.tag-primary {
	background-color: #e8f2ff;
}

.tag-primary .status-text {
	color: #2563eb;
}

.tag-warning {
	background-color: #fff4e5;
}

.tag-warning .status-text {
	color: #b45309;
}

.tag-success {
	background-color: #e8f7ef;
}

.tag-success .status-text {
	color: #15803d;
}

.tag-neutral {
	background-color: #eef2f6;
}

.tag-neutral .status-text {
	color: #475569;
}
</style>