<template>
	<view class="deposit-tabs-item-container">
		<view class="title" :class="{ 'active': isActive }">
			{{ title || '' }}
		</view>
		<view class="badge-view" v-if="badge" :style="{ 'background-image': themeStore.imageCssUrl.iconBadgeRed }">
			{{ badge || '' }}
			<!-- <theme-image class="badge-icon" src="@/static/wallet/icon-badge-red.png" mode="aspectFit" /> -->
		</view>
	</view>
</template>

<script setup>

import { useThemeStore } from '@/store/useThemeStore'
const themeStore = useThemeStore()

	defineProps({
		title: {
			type: String,
			default: ''
		},
		badge: {
			type: String,
			default: ''
		},
		isActive: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss" scoped>
	.deposit-tabs-item-container {
		position: relative;
		
		.title {
			font-size: 30rpx;
			color: #fff;
		}
		
		.title.active {
			color: #FFDF3F;
		}
		
		.badge-view {
			position: absolute;
			top: -30rpx;
			right: 0rpx;
			height: 36rpx;
			min-width: 80rpx;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			text-align: center;
			font-size: 23rpx;
			line-height: 22rpx;
			color: #fff;
			font-weight: 400; 
		}
		
		.badge-icon {
			min-width: 70rpx;
			height: 30rpx;
		}
	}
</style>