<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';

	const actions: { label: string; icon: OutlineIconName; tone: IconRingTone; href: string }[] = [
		{ label: 'Tambah Penjualan', icon: 'penjualan', tone: 'emerald', href: '/transaksi/penjualan/tambah' },
		{ label: 'Catatan Harian', icon: 'catatan', tone: 'sky', href: '/transaksi/catatan' },
		{ label: 'Hutang Piutang', icon: 'hutang', tone: 'amber', href: '/transaksi/hutang-piutang' },
		{ label: 'Semua Transaksi', icon: 'transaksi', tone: 'violet', href: '/transaksi' }
	];
</script>

<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
	{#each actions as action}
		<a
			href={action.href}
			class="group flex flex-col items-center gap-2 rounded-2xl border border-base-300/50 bg-base-100 p-4 shadow-sm transition-all active:scale-95 hover:border-base-content/15 hover:shadow-md lg:p-5"
		>
			<IconRing tone={action.tone} size="md" class="transition-transform group-hover:scale-105">
				<OutlineIcon name={action.icon} size="md" />
			</IconRing>
			<span class="text-center text-xs font-semibold leading-tight text-base-content/80 lg:text-sm">
				{action.label}
			</span>
		</a>
	{/each}
</div>
