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

<section {{ $attributes->merge(['class' => 'rounded-2xl bg-white p-6 shadow-raised sm:p-8']) }}>
    <header class="flex items-start gap-4">
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-brand-50 text-sm font-bold text-brand-700 ring-1 ring-brand-100">
            {{ $step }}
        </span>

        <div class="min-w-0">
            <h3 class="text-base font-semibold text-gray-900">{{ $title }}</h3>

            @if ($description)
                <p class="text-sm text-gray-600">{{ $description }}</p>
            @endif
        </div>
    </header>

    <div class="mt-6 flex flex-col gap-6">
        {{ $slot }}
    </div>
</section>