<script lang="ts">
	let {
		title,
		description,
		action,
		variant,
		size = 'secondary',
		href
	}: {
		title: string;
		description: string;
		action: string;
		variant: 'budget' | 'inventory' | 'fitness';
		size?: 'primary' | 'secondary';
		href: string;
	} = $props();

	// Extract the number from title (e.g. "78 uncategorized..." → "78")
	function extractNumber(t: string): { num: string; rest: string } {
		const match = t.match(/^([\d,\.]+)\s+(.*)$/);
		if (match) return { num: match[1], rest: match[2] };
		return { num: '', rest: t };
	}

	const parsed = $derived(extractNumber(title));
</script>

<a {href} class="bento {variant}">
	<div class="bento-top">
		<span class="bento-label">
			{#if variant === 'budget'}Budget{:else if variant === 'inventory'}Inventory{:else}Calories{/if}
		</span>
		<div class="bento-icon {variant}">
			{#if variant === 'budget'}
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
			{:else if variant === 'inventory'}
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
			{:else}
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
			{/if}
		</div>
	</div>

	{#if parsed.num}
		<div class="bento-value">{parsed.num}</div>
		<div class="bento-desc">{parsed.rest}<br>{description}</div>
	{:else}
		<div class="bento-desc-only">{title}<br>{description}</div>
	{/if}

	<div class="bento-action">
		{action}
		<svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg>
	</div>
</a>

<style>
	.bento {
		display: flex;
		flex-direction: column;
		padding: 22px 24px;
		border-radius: var(--radius);
		background: var(--card);
		border: 1px solid var(--border);
		border-top: 2px solid transparent;
		box-shadow: var(--shadow-sm);
		transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		cursor: pointer;
		text-decoration: none;
		color: inherit;
	}

	.bento:hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow-md);
	}
	.bento.budget:hover { border-top-color: var(--accent); }
	.bento.inventory:hover { border-top-color: var(--error); }
	.bento.fitness:hover { border-top-color: var(--success); }

	.bento:active { transform: scale(0.985); }

	.bento-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
	}

	.bento-label {
		font-size: 10px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: var(--text-4);
	}

	.bento-icon {
		width: 28px;
		height: 28px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bento-icon.budget { background: var(--accent-dim); color: var(--accent); }
	.bento-icon.inventory { background: var(--error-dim); color: var(--error); }
	.bento-icon.fitness { background: var(--success-dim); color: var(--success); }
	.bento-icon :global(svg) { width: 14px; height: 14px; }

	.bento-value {
		font-size: 32px;
		font-weight: 700;
		font-family: var(--mono);
		letter-spacing: -0.04em;
		line-height: 1;
		color: var(--text-1);
		margin-bottom: 6px;
	}

	.bento-desc {
		font-size: 13px;
		color: var(--text-3);
		line-height: 1.5;
	}

	.bento-desc-only {
		font-size: 14px;
		font-weight: 500;
		color: var(--text-2);
		line-height: 1.5;
		margin-bottom: 4px;
	}

	.bento-action {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 11px;
		font-weight: 600;
		color: var(--accent);
		margin-top: 12px;
		letter-spacing: 0.02em;
		transition: gap 0.2s;
	}
	.bento:hover .bento-action { gap: 7px; }

	@media (max-width: 768px) {
		.bento { padding: 18px 20px; }
		.bento-value { font-size: 24px; }
	}
</style>
