@props([
  'icon' => null,
  'label',
  'value',
  'trend' => null,
  'trendValue' => null,
  'color' => 'primary',
  'iconBg' => 'primary',
])

<div class="stat-card border-l-{{ $color }}-600 hover:shadow-lg transition-shadow duration-200">
  <div class="flex items-start justify-between">
    <div>
      <p class="text-slate-600 text-sm font-medium">{{ $label }}</p>
      <p class="text-3xl font-bold text-slate-900 mt-2">{{ $value }}</p>
      {{ $slot }}
    </div>
    @if ($icon)
      <div class="w-12 h-12 bg-{{ $iconBg }}-100 rounded-lg flex items-center justify-center flex-shrink-0">
        {!! $icon !!}
      </div>
    @endif
  </div>
  @if ($trend)
    <div class="mt-4 flex items-center text-sm text-{{ $trend == 'up' ? 'green' : 'red' }}-600">
      @if ($trend == 'up')
        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h.01a1 1 0 110 2H12zm-1.763 1.452a1 1 0 10-1.414-1.414l-.707.707a3 3 0 004.24 0l-.707-.707zm2.828 2.828a1 1 0 01-1.414 0L12 9.172l-1.293 1.293a1 1 0 01-1.414-1.414l2-2a1 1 0 011.414 0l2 2a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
      @else
        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M12 13a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
        </svg>
      @endif
      <span>{{ $trendValue }}</span>
    </div>
  @endif
</div>