<script lang="ts">
	import type { TopCategory } from '$lib/types/dashboard';
	import { formatRupiahShort } from '$lib/utils/format';

	interface Props {
		categories: TopCategory[];
	}

	let { categories }: Props = $props();

	const colors = [
		'bg-emerald-500',
		'bg-teal-500',
		'bg-cyan-500',
		'bg-blue-500',
		'bg-indigo-500'
	];
</script>

<div class="card bg-base-100 shadow-md">
	<div class="card-body gap-4 p-4 lg:p-6">
		<div>
			<h3 class="text-base font-bold lg:text-lg">Kategori Terlaris</h3>
			<p class="text-xs text-base-content/50 lg:text-sm">Berdasarkan pendapatan 7 hari</p>
		</div>

		{#if categories.length === 0}
			<p class="py-4 text-center text-sm text-base-content/50">Belum ada data kategori.</p>
		{:else}
			<div class="flex flex-col gap-3">
				{#each categories as cat, i (cat.kategori)}
					<div>
						<div class="mb-1 flex items-center justify-between text-sm">
							<span class="font-medium">{cat.kategori}</span>
							<span class="text-base-content/60">{formatRupiahShort(cat.total)}</span>
						</div>
						<div class="h-2 overflow-hidden rounded-full bg-base-200">
							<div
								class="h-full rounded-full transition-all duration-700 {colors[i % colors.length]}"
								style="width: {cat.persen}%"
							></div>
						</div>
						<p class="mt-0.5 text-right text-[10px] text-base-content/40">
							{cat.persen.toFixed(0)}%
						</p>
					</div>
				{/each}
			</div>
		{/if}
	</div>
</div>
