{{-- A capability card in the branding panel. --}}
@props(['icon' => 'sparkles', 'title', 'text', 'tone' => 'violet'])

@php
    $chip = match ($tone) {
        'blue' => 'from-blue-500 to-cyan-500',
        'emerald' => 'from-emerald-500 to-teal-500',
        default => 'from-fuchsia-500 to-violet-500',
    };
@endphp

<div class="flex items-start gap-4">
    <span class="flex size-11 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-white shadow-lg shadow-black/20 {{ $chip }}">
        <x-dash.icon :name="$icon" class="size-5" />
    </span>
    <span class="min-w-0">
        <span class="block text-[15px] font-semibold text-white">{{ $title }}</span>
        <span class="mt-0.5 block text-sm text-indigo-100/70">{{ $text }}</span>
    </span>
</div>