<script lang="ts">
	import type { Snippet } from 'svelte';
	import { cn } from '$lib/utils';

	type Variant = 'budget' | 'inventory' | 'fitness';
	type Size = 'primary' | 'secondary';

	let {
		title,
		description = '',
		action,
		variant,
		size = 'primary' as Size,
		icon,
		onclick
	}: {
		title: string;
		description?: string;
		action: string;
		variant: Variant;
		size?: Size;
		icon?: Snippet;
		onclick?: () => void;
	} = $props();

	const variantClasses: Record<Variant, string> = {
		budget: 'action-card-icon--budget',
		inventory: 'action-card-icon--inventory',
		fitness: 'action-card-icon--fitness'
	};
</script>

<button
	class={cn('action-card', size === 'secondary' && 'action-card--secondary')}
	onclick={onclick}
	type="button"
>
	<div class="action-card-left">
		<div class={cn('action-card-icon', variantClasses[variant])}>
			{#if icon}
				{@render icon()}
			{/if}
		</div>
		<div>
			<div class={cn('action-card-title', size === 'secondary' && 'action-card-title--sm')}>
				{title}
			</div>
			{#if description}
				<div class={cn('action-card-desc', size === 'secondary' && 'action-card-desc--sm')}>
					{description}
				</div>
			{/if}
		</div>
	</div>
	<div class="action-card-right">
		<span>{action}</span>
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			<path d="m9 18 6-6-6-6"/>
		</svg>
	</div>
</button>

<style>
	.action-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: var(--radius, 12px);
		background: var(--card);
		box-shadow: var(--card-shadow);
		transition: all var(--transition, 180ms ease);
		cursor: pointer;
		border: 1px solid var(--border);
		padding: 20px 24px;
		width: 100%;
		text-align: left;
		font-family: var(--font);
	}

	.action-card:hover {
		transform: translateY(-1px);
		box-shadow: var(--card-shadow), 0 2px 8px rgba(0, 0, 0, 0.04);
	}

	.action-card--secondary {
		padding: 14px 20px;
		background: var(--card-secondary);
		box-shadow: var(--card-shadow-sm);
	}

	.action-card-left {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.action-card-icon {
		width: 40px;
		height: 40px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.action-card-icon :global(svg) {
		width: 20px;
		height: 20px;
	}

	.action-card-icon--budget {
		background: var(--accent-bg);
		color: var(--accent);
	}

	.action-card-icon--inventory {
		background: var(--error-bg);
		color: var(--error);
	}

	.action-card-icon--fitness {
		background: var(--success-bg);
		color: var(--success);
	}

	.action-card-title {
		font-size: var(--text-md);
		font-weight: 600;
		color: var(--text-1);
	}

	.action-card-title--sm {
		font-size: var(--text-base);
		font-weight: 500;
	}

	.action-card-desc {
		font-size: var(--text-sm);
		color: var(--text-3);
		margin-top: 2px;
	}

	.action-card-desc--sm {
		font-size: var(--text-sm);
	}

	.action-card-right {
		font-size: var(--text-sm);
		color: var(--text-3);
		display: flex;
		align-items: center;
		gap: 4px;
		flex-shrink: 0;
	}

	.action-card-right svg {
		width: 16px;
		height: 16px;
	}
</style>
