@props([
    'type' => 'info', 
    'title' => null, 
    'icon' => null,
    'style' => 'left-accent', // 'left-accent' (default AdminLTE), 'soft' (modern SaaS)
])

@php
    $baseClass = "callout callout-$type shadow-sm";
    $softClass = ($style === 'soft') ? "callout-soft callout-soft-$type" : "";
@endphp

<div {{ $attributes->merge(['class' => "$baseClass $softClass"]) }}>
    @if($title)
        <h5 class="text-{{ $type }} font-weight-bold">
            @if($icon) <i class="{{ $icon }} mr-1"></i> @endif
            {{ $title }}
        </h5>
    @endif
    <p class="m-0 text-secondary" style="font-size: 0.95rem; line-height: 1.5;">
        {{ $slot }}
    </p>
</div>

@pushonce('css')
<style>
    /* Estilos Soft para Callouts */
    .callout-soft {
        border-left: none !important;
        border-radius: 0.5rem;
        padding: 1rem 1.25rem;
    }
    .callout-soft-primary   { background-color: rgba(0, 123, 255, 0.1) !important; border-left: 4px solid #007bff !important; }
    .callout-soft-secondary { background-color: rgba(108, 117, 125, 0.1) !important; border-left: 4px solid #6c757d !important; }
    .callout-soft-success   { background-color: rgba(40, 167, 69, 0.1) !important; border-left: 4px solid #28a745 !important; }
    .callout-soft-danger    { background-color: rgba(220, 53, 69, 0.1) !important; border-left: 4px solid #dc3545 !important; }
    .callout-soft-warning   { background-color: rgba(255, 193, 7, 0.1) !important; border-left: 4px solid #ffc107 !important; }
    .callout-soft-info      { background-color: rgba(23, 162, 184, 0.1) !important; border-left: 4px solid #17a2b8 !important; }
</style>
@endpushonce