nettown_frontend/src/lib/features/sentiment/ui/SummaryCards.svelte

<script>
	let { cards = [], onCardSelect = () => {}, selectedCardId = null } = $props();
</script>

<section class="space-y-3 transition-colors duration-200">
	<h2 class="text-sm font-bold tracking-wider text-slate-500 dark:text-slate-400 uppercase">
		Resumo Rápido
	</h2>

	<div class="grid grid-cols-2 gap-4 xl:grid-cols-4">
		{#each cards as card}
			<button
				type="button"
				class={`w-full rounded-xl border p-4 text-left shadow-sm transition-all duration-200 ${
					selectedCardId === card.id
						? 'border-indigo-300 bg-indigo-50 dark:border-indigo-500/50 dark:bg-indigo-500/10 ring-1 ring-indigo-200 dark:ring-indigo-500/20'
						: 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50 dark:border-slate-800 dark:bg-[#1e293b] dark:hover:border-slate-700 dark:hover:bg-slate-800/80'
				}`}
				onclick={() => onCardSelect(card)}
			>
				<div class="flex items-start justify-between gap-3">
					<div>
						<p class="text-3xl leading-none font-extrabold text-slate-900 dark:text-white transition-colors">{card.value}</p>
						<p class="mt-2 text-xs font-semibold text-slate-500 dark:text-slate-400 transition-colors">{card.label}</p>
					</div>
					{#if card.image}
						<div class="h-10 w-10 shrink-0 rounded-lg border border-slate-200 dark:border-slate-700/50 bg-slate-50 dark:bg-slate-900/50 p-2 flex items-center justify-center transition-colors">
							<img src={card.image} alt={card.label} class="h-full w-full object-contain opacity-80 dark:opacity-100" />
						</div>
					{/if}
				</div>
			</button>
		{/each}
	</div>
</section>