<template>
	<div>
		<div
			v-for="bar in bars"
			:key="bar.name"
			class="flex items-center gap-2 mb-2"
		>
			<div
				class="text-[11px] font-semibold text-[var(--ins-text-secondary)] min-w-[72px] text-right"
			>
				{{ bar.name }}
			</div>
			<div class="flex-1 h-[22px] bg-[var(--bg-base)] rounded overflow-hidden">
				<div
					class="h-full rounded flex items-center pl-2 text-[10px] font-bold text-white transition-all duration-700"
					:style="{ width: bar.widthPct + '%', background: bar.color }"
				>
					₼{{ bar.value }}M
				</div>
			</div>
			<div
				class="text-[11px] font-bold text-[var(--ins-text-tertiary)] font-data min-w-[44px]"
			>
				{{ bar.pct }}%
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed } from "vue"

const props = defineProps({
	bars: {
		type: Array,
		default: () => [],
		// [{ name, value, pct, color }]
	},
})
</script>
