@props([
    'number' => null,
    'title',
    'description' => null,
    'badge' => null,
])

<div class="grid gap-3 border rounded p-3 md:grid-cols-[2.5rem_1fr]">
    <div class="h-8 w-8 rounded-full bg-slate-900 text-white text-sm font-semibold flex items-center justify-center">
        {{ $number }}
    </div>
    <div class="space-y-3">
        <div class="flex items-start justify-between gap-3">
            <div>
                <div class="font-medium">{{ $title }}</div>
                @if ($description)
                    <p class="mt-1 text-sm text-slate-600">{{ $description }}</p>
                @endif
            </div>
            @if ($badge)
                <span class="shrink-0 rounded bg-slate-100 px-2 py-1 text-xs text-slate-600">{{ $badge }}</span>
            @endif
        </div>

        {{ $slot }}
    </div>
</div>