@props(['type' => 'dark'])

@php
    switch ($type) {
        case 'info':
            $class = 'text-blue-800 bg-blue-50 dark:text-blue-400';
            break;
        case 'danger':
            $class = 'text-red-800 bg-red-50 dark:text-red-400';
            break;
        case 'success':
            $class = 'text-green-800 bg-green-50 dark:text-green-400';
            break;
        case 'warning':
            $class = 'text-yellow-800 bg-yellow-50 dark:text-yellow-300';
            break;
        default:
            $class = 'text-gray-800 bg-gray-50 dark:text-gray-300';
            break;
    }
@endphp

<div {{$attributes->merge(['class'=>'p-4 my-4 mx-auto text-md max-w-[80%] rounded-lg dark:bg-gray-800 '.$class])}} role="alert">
    <span class="font-semibold">{{$title}}</span> {{$content}}
</div>