@props([
	'message' => ''
])

<div class="border border-red-500 rounded-md p-3 text-red-900">
    <div class="flex gap-3">
		<div class="flex-shrink-0 size-5">
			<x-ui-icon name="alert-circle" type="line" class="size-4 text-red-900"></x-ui-icon>
		</div>
		<div class="flex-1 overflow-hidden">
			<p class="text-par-s">
				{{ $message }}
			</p>
		</div>
	</div>
</div>