@props([
    'title' => 'Newsletter',
    'description' => 'Erhalten Sie die neuesten Pressemitteilungen direkt in Ihr Postfach',
    'buttonText' => 'Jetzt abonnieren',
])

<x-web.sidebar-widget :title="$title">
    <div class="text-center">
        <svg class="h-10 w-10 text-[var(--color-primary)] mx-auto mb-3" fill="none"
            stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
            </path>
        </svg>
        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
            {{ $description }}
        </p>
        <button class="btn-primary w-full py-3 text-sm">
            {{ $buttonText }}
        </button>
    </div>
</x-web.sidebar-widget>