@props(['announcement'])

@php
    $tone = [
        'info' => 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-100',
        'success' => 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-100',
        'warning' => 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100',
        'danger' => 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100',
    ][$announcement->level] ?? 'border-slate-200 bg-slate-50 text-slate-800';
@endphp

<div x-data="{ show: true }" x-show="show"
     class="no-print border-b px-4 py-2.5 text-sm sm:px-6 lg:px-8 {{ $tone }}">
    <div class="flex items-start gap-3">
        <x-ui.icon name="info" class="mt-0.5 h-4 w-4 shrink-0" />

        <div class="min-w-0 flex-1">
            <span class="font-semibold">{{ $announcement->title }}</span>
            <span class="ml-1">{{ $announcement->body }}</span>
        </div>

        @if ($announcement->is_dismissible)
            <button type="button" @click="show = false" class="shrink-0 opacity-60 hover:opacity-100">
                <x-ui.icon name="x" class="h-4 w-4" />
            </button>
        @endif
    </div>
</div>