@props(['data' => []])

<div class="my-8 bg-primary/10 border border-primary/20 rounded-xl p-6 sm:p-8">
    <div class="flex items-start gap-4">
        @if(!empty($data['icon']))
        <span class="text-2xl shrink-0">{{ $data['icon'] }}</span>
        @else
        {{-- Default info icon --}}
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-primary shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10" />
            <line x1="12" y1="16" x2="12" y2="12" />
            <line x1="12" y1="8" x2="12.01" y2="8" />
        </svg>
        @endif
        <div>
            @if(!empty($data['title']))
            <strong class="text-foreground font-semibold block mb-2">{{ $data['title'] }}</strong>
            @endif
            <p class="text-foreground leading-[var(--gold,1.618)]">
                {{ $data['content'] ?? $data['text'] ?? '' }}
            </p>
        </div>
    </div>
</div>