<script lang="ts">
	let { value = 0, goal = 0, label = '', unit = '', color = 'primary' }:
		{ value: number; goal: number; label: string; unit: string; color: string } = $props();

	let pct = $derived(goal > 0 ? Math.min((value / goal) * 100, 100) : 0);
	let remaining = $derived(Math.max(goal - value, 0));
	let over = $derived(value > goal && goal > 0);

	let borderColor = $derived(over ? 'border-l-error' : color === 'primary' ? 'border-l-primary' : color === 'secondary' ? 'border-l-secondary' : color === 'accent' ? 'border-l-accent' : 'border-l-info');
	let progressClass = $derived(over ? 'progress-error' : color === 'primary' ? 'progress-primary' : color === 'secondary' ? 'progress-secondary' : color === 'accent' ? 'progress-accent' : 'progress-info');
</script>

<div class="bg-base-200 rounded-xl p-4 border-l-4 {borderColor}">
	<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">{label}</div>
	<div class="flex items-baseline gap-1.5 mt-1">
		<span class="text-2xl font-bold">{Math.round(value)}</span>
		<span class="text-sm text-base-content/40">/ {Math.round(goal)}{unit}</span>
	</div>
	<progress class="progress w-full h-1.5 mt-2 {progressClass}" value={pct} max="100"></progress>
	<div class="text-xs mt-1 {over ? 'text-error' : 'text-base-content/40'}">
		{#if over}{Math.round(value - goal)}{unit} over{:else}{Math.round(remaining)}{unit} left{/if}
	</div>
</div>
