@props([
    'number' => '1',
    'title' => '',
    'description' => '',
    'color' => 'blue'
])

@php
    $colorClasses = [
        'blue' => 'bg-blue-100 text-blue-600 border-blue-200',
        'green' => 'bg-green-100 text-green-600 border-green-200',
        'purple' => 'bg-purple-100 text-purple-600 border-purple-200',
        'orange' => 'bg-orange-100 text-orange-600 border-orange-200'
    ];

    $numberColorClasses = $colorClasses[$color] ?? $colorClasses['blue'];
@endphp

<div {{ $attributes->merge(['class' => 'relative']) }}>
    <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-slate-100 h-full">
        <div class="flex flex-col h-full">
            <div class="w-12 h-12 rounded-full {{ $numberColorClasses }} flex items-center justify-center text-xl font-bold mb-4 border-2">
                {{ $number }}
            </div>
            <h3 class="text-xl font-semibold text-slate-900 mb-3">{{ $title }}</h3>
            <p class="text-slate-600 leading-relaxed flex-grow">{{ $description }}</p>
        </div>
    </div>
</div>