<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 type { RecentTransaction } from '$lib/types/dashboard';
	import { formatRupiah, formatWaktu } from '$lib/utils/format';

	interface Props {
		transactions: RecentTransaction[];
	}

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

	const jenisConfig: Record<
		RecentTransaction['jenis'],
		{ icon: OutlineIconName; tone: IconRingTone; sign: string }
	> = {
		pendapatan: { icon: 'arrow-down', tone: 'emerald', sign: '+' },
		pengeluaran: { icon: 'arrow-up', tone: 'rose', sign: '-' }
	};
</script>

<div class="card bg-base-100 shadow-md">
	<div class="card-body gap-3 p-4 lg:p-6">
		<div class="flex items-center justify-between">
			<h3 class="text-base font-bold lg:text-lg">Transaksi Terbaru</h3>
			<span class="badge badge-ghost badge-sm">{transactions.length} item</span>
		</div>

		{#if transactions.length === 0}
			<div class="py-8 text-center text-sm text-base-content/50">
				Belum ada transaksi tercatat.
			</div>
		{:else}
			<div class="flex flex-col gap-2">
				{#each transactions as trx (trx.id)}
					{@const config = jenisConfig[trx.jenis]}
					<div
						class="flex items-center gap-3 rounded-xl border border-base-300/40 bg-base-200/30 p-3 transition-colors hover:bg-base-200/60 lg:p-4"
					>
						<IconRing tone={config.tone} size="sm" shape="circle">
							<OutlineIcon name={config.icon} size="sm" />
						</IconRing>
						<div class="min-w-0 flex-1">
							<p class="truncate text-sm font-semibold">{trx.deskripsi}</p>
							<p class="text-xs text-base-content/50">
								{trx.kategori} · {formatWaktu(trx.waktu)}
							</p>
						</div>
						<p
							class="shrink-0 text-sm font-bold {trx.jenis === 'pendapatan'
								? 'text-emerald-600'
								: 'text-rose-600'}"
						>
							{config.sign}{formatRupiah(trx.jumlah)}
						</p>
					</div>
				{/each}
			</div>
		{/if}
	</div>
</div>
