@props([
    'title' => '',
    'subtitle' => null,
    'icon' => 'squares-2x2',
    'tone' => 'slate',
])

@php
    // Tone → icon-chip classes. Kept as a literal map so Tailwind's scanner sees
    // every class it must keep; an interpolated `bg-{$tone}-50` would be purged.
    $chip = [
        'emerald' => 'bg-emerald-50 text-emerald-600',
        'rose' => 'bg-rose-50 text-rose-600',
        'amber' => 'bg-amber-50 text-amber-600',
        'sky' => 'bg-sky-50 text-sky-600',
        'indigo' => 'bg-indigo-50 text-indigo-600',
        'violet' => 'bg-violet-50 text-violet-600',
        'cyan' => 'bg-cyan-50 text-cyan-600',
        'orange' => 'bg-orange-50 text-orange-600',
        'slate' => 'bg-slate-100 text-slate-500',
    ][$tone] ?? 'bg-slate-100 text-slate-500';
@endphp

<div {{ $attributes->merge(['class' => 'flex items-start gap-3 border-b border-slate-100 p-4 sm:p-5']) }}>
    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $chip }}">
        <x-icon :name="$icon" class="h-5 w-5" />
    </span>
    <div class="min-w-0">
        <h2 class="text-base font-semibold text-slate-900">{{ $title }}</h2>
        @if ($subtitle)
            <p class="mt-0.5 text-xs text-slate-500">{{ $subtitle }}</p>
        @endif
    </div>
</div>