@props([
    'title',
    'value',
    'icon' => null,
    'change' => null,
    'changeType' => 'up',
    'color' => 'green',
])

@php
    $colorClasses = match($color) {
        'green' => 'stat-card-icon-green',
        'blue' => 'stat-card-icon-blue',
        'purple' => 'stat-card-icon-purple',
        'orange' => 'stat-card-icon-orange',
        'red' => 'stat-card-icon-red',
        default => 'stat-card-icon-green',
    };
@endphp

<div class="stat-card">
    <div class="stat-card-content">
        <div class="stat-card-info">
            <p class="stat-card-title">{{ $title }}</p>
            <p class="stat-card-value">{{ $value }}</p>
            @if($change !== null)
            <div class="stat-card-change {{ $changeType === 'up' ? 'stat-card-change-up' : 'stat-card-change-down' }}">
                @if($changeType === 'up')
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 11V3M7 3L3 7M7 3l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                @else
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 3v8M7 11l4-4M7 11L3 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                @endif
                <span>{{ $change }}%</span>
            </div>
            @endif
        </div>
        @if($icon)
        <div class="stat-card-icon {{ $colorClasses }}">
            {!! $icon !!}
        </div>
        @endif
    </div>
</div>