@props([
    'title' => 'RSS-Feed',
    'description' => 'Bleiben Sie über neue Meldungen auf dem Laufenden',
    'buttonText' => 'RSS abonnieren',
])

<x-web.sidebar-widget :title="$title">
    <div class="text-center">
        <svg class="h-10 w-10 text-[var(--color-secondary)] mx-auto mb-3" fill="none"
            stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z">
            </path>
        </svg>
        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
            {{ $description }}
        </p>
        <button
            class="w-full px-6 py-3 text-sm font-medium text-zinc-700 dark:text-zinc-300 border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-all">
            {{ $buttonText }}
        </button>
    </div>
</x-web.sidebar-widget>