@props([
    'eyebrow' => 'MPBA WMS',
    'title',
    'description' => null,
    'icon' => null,
    'stats' => [],
])

<section {{ $attributes->merge(['class' => 'wms-page-hero']) }}>
    <div class="wms-page-hero-copy">
        <p class="wms-page-hero-kicker">{{ $eyebrow }}</p>
        <h1 class="wms-page-hero-title">{{ $title }}</h1>
        @if($description)
            <p class="wms-page-hero-description">{{ $description }}</p>
        @endif
    </div>

    <div class="wms-page-hero-actions">
        @foreach($stats as $stat)
            <article class="wms-page-hero-stat">
                <span>{{ $stat['label'] ?? '' }}</span>
                <strong>
                    @if(! empty($stat['icon']))
                        <i class="{{ $stat['icon'] }}" aria-hidden="true"></i>
                    @endif
                    {{ $stat['value'] ?? '' }}
                </strong>
            </article>
        @endforeach

        @if($icon && count($stats) === 0)
            <article class="wms-page-hero-stat wms-page-hero-icon-card" aria-hidden="true">
                <strong><i class="{{ $icon }}"></i></strong>
            </article>
        @endif

        @if($slot->isNotEmpty())
            {{ $slot }}
        @endif
    </div>
</section>