{{--

<x-alert type="error"></x-alert>
<x-alert type="error" :message="session('error')" />

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

@php
    switch($type) {
        case('success'):
            $color = 'bg-success-dark';
            if(empty($title)) $title = 'Success';
            break;
        case('error'):
            $color ='bg-error-dark';
            if(empty($title)) $title = 'Error';
            break;
        case('info'):
        default:
            $color = 'bg-info-dark';
            if(empty($title)) $title = 'Info';
            break;
    }
@endphp

@if(!empty($message) || !empty(trim($slot)))
    <div {{ $attributes->class('py-3 pl-4 pr-6 rounded text-white '.$color) }}>
        <div class="flex gap-3 w-full">
            <x-icon :name="$type??'info'" size="1.3em" class="text-white mt-0.5" />
            <div>
                <div class="font-bold">{{ $title??'' }}</div>
                <div>{{ $message ?? '' }}</div>
            </div>
            {{ $slot ?? '' }}
        </div>
    </div>
@endif