{{-- Button Component --}}
@php
    $text = $component['content']['text'] ?? 'Click Me';
    $url = $component['content']['url'] ?? '#';
    $style = $component['content']['style'] ?? 'primary';
    $size = $component['content']['size'] ?? 'md';
    $alignment = $component['content']['alignment'] ?? 'left';
    $icon = $component['content']['icon'] ?? '';
    $target = $component['content']['target'] ?? '_self';
@endphp

<div class="button-wrapper text-{{ $alignment }}">
    <a href="{{ $url }}"
       class="btn btn-{{ $style }} btn-{{ $size }}"
       target="{{ $target }}"
       style="font-family: var(--body-font);">
        @if($icon)
            <i class="{{ $icon }} me-2"></i>
        @endif
        {{ $text }}
    </a>
</div>

<style>
    .button-wrapper {
        margin: 1rem 0;
    }

    .btn {
        transition: all 0.3s ease;
    }

    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .btn-primary:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .btn-secondary {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    .btn-outline-primary {
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .btn-outline-primary:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }
</style>