<script lang="ts">
	import IconRing from '$lib/components/ui/IconRing.svelte';
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import type { IconRingTone } from '$lib/components/ui/IconRing.svelte';
	import type { OutlineIconName } from '$lib/components/ui/OutlineIcon.svelte';
	import { formatRupiah, formatRupiahShort } from '$lib/utils/format';

	interface Props {
		title: string;
		value: number;
		icon: OutlineIconName;
		trend?: number;
		trendLabel?: string;
		variant?: 'emerald' | 'rose' | 'blue' | 'amber';
		compact?: boolean;
	}

	let {
		title,
		value,
		icon,
		trend,
		trendLabel = 'vs kemarin',
		variant = 'emerald',
		compact = false
	}: Props = $props();

	const tones: Record<NonNullable<Props['variant']>, IconRingTone> = {
		emerald: 'emerald',
		rose: 'rose',
		blue: 'sky',
		amber: 'amber'
	};

	const trendPositive = $derived(trend !== undefined && trend >= 0);
</script>

<div class="card bg-base-100 shadow-md transition-shadow hover:shadow-lg">
	<div class="card-body gap-2 p-4 lg:p-5">
		<div class="flex items-start justify-between">
			<IconRing tone={tones[variant]} size="sm" class="h-10 w-10 lg:h-12 lg:w-12">
				<OutlineIcon name={icon} size="sm" class="lg:h-6 lg:w-6" />
			</IconRing>
			{#if trend !== undefined}
				<div
					class="badge badge-sm border-0 text-white {trendPositive
						? 'bg-emerald-600'
						: 'bg-rose-600'}"
				>
					{trendPositive ? '↑' : '↓'} {Math.abs(trend).toFixed(1)}%
				</div>
			{/if}
		</div>
		<div>
			<p class="text-xs font-medium uppercase tracking-wide text-base-content/50 lg:text-sm">
				{title}
			</p>
			<p class="mt-1 text-lg font-bold text-base-content lg:text-2xl">
				{compact ? formatRupiahShort(value) : formatRupiah(value)}
			</p>
			{#if trend !== undefined}
				<p class="mt-0.5 text-xs text-base-content/40">{trendLabel}</p>
			{/if}
		</div>
	</div>
</div>
