@props([
	'messageData' => [],
	'messageId' => time(),
	'centered' => false
])

<div class="{{ isset($messageData['type']) && $messageData['type'] == 'error' ? 'bg-red-600 text-white' : 'bg-gradient-to-r from-lime-400 to-lime-500 text-lab-pr' }} py-3 px-6" id="message-{{ $messageId }}">
	<div class="flex items-center">
		<div class="flex-1 mr-4 {{ $centered ? 'text-center' : '' }}">
			@if(isset($messageData['title']))
				<h4 class="text-par-s font-bold ">
					{{ $messageData['title'] }}
				</h4>
			@endif
			<p class="text-par-s">
				{{ $messageData['content'] }}
			</p>  
		</div>
		<div class="flex-shrink-0">
			<button type="button" data-message-dismiss="{{ $messageId }}" class="inline-flex-center size-8 rounded-full bg-black/70 hover:bg-black">
				<span  class="text-white opacity-70 size-5">
					<x-ui-icon name="x-close" type="solid"></x-ui-icon>
				</span>
			</button>
		</div>
	</div> 
</div>