@props([
    'title',
    'value' => 0,
    'color' => 'blue',
    'link' => '#',
    'linkText' => 'عرض الكل ←'
])

@php
    $colors = [
        'blue' => 'text-blue-700',
        'yellow' => 'text-yellow-600',
        'green' => 'text-green-700',
        'purple' => 'text-purple-700',
        'red' => 'text-red-700',
    ];
    $textColor = $colors[$color] ?? 'text-blue-700';
@endphp

<div class="bg-white rounded-xl shadow-md p-6 text-center border border-brand-light-gray hover-scale card-shadow">
    <p class="text-sm text-brand-text mb-2">{{ $title }}</p>
    <p class="text-5xl font-extrabold {{ $textColor }}">{{ $value }}</p>
    <a href="{{ $link }}" class="text-blue-500 hover:underline text-sm mt-3 block font-medium">
        {{ $linkText }}
    </a>
</div>