@props([
    'type' => 'success', // success, error, warning, info
    'title' => null,
])

@php
$fw = config('ui.framework');

// Bootstrap classes
$bs = [
    'success' => 'alert alert-success',
    'error'   => 'alert alert-danger',
    'warning' => 'alert alert-warning',
    'info'    => 'alert alert-info',
];

// Tailwind classes
$tw = [
    'success' => 'bg-green-100 border border-green-400 text-green-700',
    'error'   => 'bg-red-100 border border-red-400 text-red-700',
    'warning' => 'bg-yellow-100 border border-yellow-400 text-yellow-700',
    'info'    => 'bg-blue-100 border border-blue-400 text-blue-700',
];

$class = $fw === 'tailwind' ? $tw[$type] : $bs[$type];
@endphp

@if($fw === 'tailwind')
    <div {{ $attributes->merge(['class' => "px-4 py-3 rounded {$class}"]) }}>
        @if($title)
            <strong class="font-bold">{{ $title }}</strong>
        @endif
        <span class="block sm:inline">{{ $slot }}</span>
    </div>
@else
    <div {{ $attributes->merge(['class' => $class]) }}>
        @if($title)
            <strong>{{ $title }}</strong>
        @endif
        {{ $slot }}
    </div>
@endif