<script lang="ts">
	import type { Component } from 'svelte';

	interface Props {
		title: string;
		value: string | number;
		description?: string;
		icon: Component;
		trend?: {
			value: number;
			label: string;
		};
		color?: 'default' | 'green' | 'yellow' | 'red' | 'blue';
	}

	let { title, value, description, icon, trend, color = 'default' }: Props = $props();

	const colorClasses = {
		default: 'bg-slate-100 text-slate-600',
		green: 'bg-green-100 text-green-600',
		yellow: 'bg-yellow-100 text-yellow-600',
		red: 'bg-red-100 text-red-600',
		blue: 'bg-blue-100 text-blue-600'
	};
</script>

<div class="glass-card p-5">
	<div class="flex items-start justify-between">
		<div>
			<p class="text-sm font-medium text-slate-500">{title}</p>
			<p class="mt-1 text-2xl font-semibold text-slate-900">{value}</p>
			{#if description}
				<p class="mt-1 text-xs text-slate-500">{description}</p>
			{/if}
			{#if trend}
				<p class="mt-2 text-xs">
					<span class={trend.value >= 0 ? 'text-green-600' : 'text-red-600'}>
						{trend.value >= 0 ? '+' : ''}{trend.value}%
					</span>
					<span class="text-slate-500">{trend.label}</span>
				</p>
			{/if}
		</div>
		<div class="flex h-10 w-10 items-center justify-center rounded-lg {colorClasses[color]}">
			<svelte:component this={icon} class="h-5 w-5" />
		</div>
	</div>
</div>
