@props([
    'title' => '',
    'subtitle' => '',
    'userName' => '',
    'primaryAction' => null,
    'secondaryAction' => null,
    'backgroundPattern' => true
])

<div {{ $attributes->merge(['class' => 'welcome-hero position-relative overflow-hidden rounded-4 p-4 mb-4']) }}>
    @if($backgroundPattern)
        <div class="welcome-bg-pattern position-absolute top-0 start-0 w-100 h-100 opacity-10"></div>
    @endif
    
    <div class="welcome-content position-relative">
        <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center flex-grow-1">
                <div class="welcome-icon me-3">
                    <div class="icon-circle d-flex align-items-center justify-content-center">
                        <x-ui.nicon name="home" class="text-white"/>
                    </div>
                </div>
                
                <div class="welcome-text">
                    @if($userName)
                        <div class="welcome-greeting text-white-50 small fw-medium mb-1">
                            Bonjour, {{ $userName }}
                        </div>
                    @endif
                    
                    @if($title)
                        <h1 class="welcome-title h4 fw-bold text-white mb-1">{{ $title }}</h1>
                    @endif
                    
                    @if($subtitle)
                        <p class="welcome-subtitle text-white-75 mb-0 small">{{ $subtitle }}</p>
                    @endif
                </div>
            </div>
            
            <div class="welcome-actions ms-3">
                @if($primaryAction)
                    {{ $primaryAction }}
                @endif
                
                @if($secondaryAction)
                    {{ $secondaryAction }}
                @endif
            </div>
        </div>
    </div>
</div>