@props(['title' => null, 'light' => false])

@php
    $bg = $light ? 'bg-red-50 border border-red-200' : 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800';
    $icon = $light ? 'text-red-600' : 'text-red-600 dark:text-red-400';
    $titleColor = $light ? 'text-red-800' : 'text-red-800 dark:text-red-200';
    $textColor = $light ? 'text-red-700' : 'text-red-700 dark:text-red-300';
@endphp

@if ($errors->any())
    <div {{ $attributes->merge(['class' => "rounded-lg p-4 $bg"]) }}>
        <div class="flex items-start gap-3">
            <flux:icon.exclamation-circle class="h-5 w-5 {{ $icon }} mt-0.5 flex-shrink-0" />
            <div class="flex-1">
                <h3 class="text-sm font-semibold {{ $titleColor }} mb-2">
                    {{ $title ?? __('Bitte korrigieren Sie folgende Fehler:') }}
                </h3>
                <ul class="text-sm {{ $textColor }} space-y-1 list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
@endif