@props([
    'title'  => '',
    'value'  => '0',
    'change' => null,
    'period' => 'vs last month',
    'icon'   => null,
    'color'  => 'primary',
])

@php
    $colorMap = [
        'primary' => 'bg-primary-100 text-primary-600 dark:bg-primary-950 dark:text-primary-400',
        'green'   => 'bg-green-100 text-green-600 dark:bg-green-950 dark:text-green-400',
        'amber'   => 'bg-amber-100 text-amber-600 dark:bg-amber-950 dark:text-amber-400',
        'red'     => 'bg-red-100 text-red-600 dark:bg-red-950 dark:text-red-400',
        'purple'  => 'bg-purple-100 text-purple-600 dark:bg-purple-950 dark:text-purple-400',
        'cyan'    => 'bg-cyan-100 text-cyan-600 dark:bg-cyan-950 dark:text-cyan-400',
    ];
    $iconClass = $colorMap[$color] ?? $colorMap['primary'];

    $isPositive = $change && str_starts_with($change, '+');
    $isNegative = $change && str_starts_with($change, '-');
@endphp

<div class="flex items-center gap-4 rounded-xl border border-border bg-card p-6 shadow-card">
    @if($icon)
        <div class="flex-shrink-0 rounded-xl p-3 {{ $iconClass }}">
            <span class="flex h-6 w-6 items-center justify-center">{!! $icon !!}</span>
        </div>
    @endif

    <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium text-muted-foreground">{{ $title }}</p>
        <p class="mt-1 text-2xl font-bold text-foreground">{{ $value }}</p>

        @if($change)
            <p class="mt-1 flex items-center gap-1 text-xs">
                @if($isPositive)
                    <svg class="h-3.5 w-3.5 text-green-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd"/>
                    </svg>
                    <span class="font-medium text-green-600 dark:text-green-400">{{ $change }}</span>
                @elseif($isNegative)
                    <svg class="h-3.5 w-3.5 text-red-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M12 13a1 1 0 100 2h5a1 1 0 001-1V9a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z" clip-rule="evenodd"/>
                    </svg>
                    <span class="font-medium text-red-600 dark:text-red-400">{{ $change }}</span>
                @else
                    <span class="font-medium text-muted-foreground">{{ $change }}</span>
                @endif
                <span class="text-muted-foreground/80">{{ $period }}</span>
            </p>
        @endif
    </div>
</div>