<script lang="ts">
  import { TrendingUp, TrendingDown, Minus } from 'lucide-svelte';
  import type { ComponentType, SvelteComponent } from 'svelte';

  interface Props {
    title: string;
    value: string | number;
    description?: string;
    trend?: 'up' | 'down' | 'neutral';
    trendValue?: string;
    icon?: ComponentType<SvelteComponent>;
  }

  let { 
    title, 
    value, 
    description, 
    trend = 'neutral', 
    trendValue, 
    icon: Icon 
  }: Props = $props();

  const trendColorMap: Record<'up' | 'down' | 'neutral', string> = {
    up: 'text-success',
    down: 'text-error',
    neutral: 'text-base-content/50'
  };

  const trendIconMap: Record<'up' | 'down' | 'neutral', ComponentType<SvelteComponent>> = {
    up: TrendingUp,
    down: TrendingDown,
    neutral: Minus
  };
</script>

<div class="stat-card card bg-base-100 shadow-sm border border-base-300">
	<div class="card-body p-4">
		<div class="flex items-start justify-between">
			<div class="stat-title text-sm text-base-content/70">{title}</div>
			{#if Icon}
				<div class="text-base-content/50">
					<svelte:component this={Icon} size={20} />
				</div>
			{/if}
		</div>
		<div class="stat-value text-3xl font-bold mt-1">{value}</div>
		<div class="stat-desc flex items-center gap-1 mt-1">
			{#if trendValue}
      <span class={trendColorMap[trend]}>
        <svelte:component this={trendIconMap[trend]} size={14} />
      </span>
      <span class={trendColorMap[trend]}>{trendValue}</span>
			{/if}
			{#if description}
				<span class="text-base-content/50">{description}</span>
			{/if}
		</div>
	</div>
</div>
