@props([
    'title' => '—',
    'value' => '0',
    'color' => 'pink',
])

@php
$colors = [
    'pink'     => 'from-pink-50 to-pink-100 border-pink-400 text-pink-800',
    'emerald'  => 'from-emerald-50 to-emerald-100 border-emerald-400 text-emerald-800',
    'cyan'     => 'from-cyan-50 to-cyan-100 border-cyan-400 text-cyan-800',
    'violet'   => 'from-violet-50 to-violet-100 border-violet-400 text-violet-800',
    'amber'    => 'from-amber-50 to-amber-100 border-amber-400 text-amber-800',
];
$cls = $colors[$color] ?? $colors['pink'];
@endphp

<div class="rounded-xl p-4 bg-gradient-to-br {{ $cls }} border-r-4">
  <div class="text-sm">{{ $title }}</div>
  <div class="text-3xl font-bold mt-1">{{ $value }}</div>
</div>