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

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

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