@props([
    'tone' => 'warn',
    'badge' => '',
    'status' => '',
    'count' => 0,
    'sublabel' => '',
    'description' => '',
    'tags' => [],
])

<div {{ $attributes->merge(['class' => 'mec-priority-watch-card mec-priority-watch-card--'.$tone]) }}>
    <div class="mec-priority-watch-card__accent"></div>
    <div class="mec-priority-watch-card__inner">
        <div class="mec-priority-watch-card__top">
            <span class="mec-priority-watch-card__badge">{{ $badge }}</span>
            <span class="mec-priority-watch-card__status">{{ $status }}</span>
        </div>

        <div class="mec-priority-watch-card__metric">
            <div class="mec-priority-watch-card__value">{{ number_format((int) $count) }}</div>
            <p class="mec-priority-watch-card__sublabel">{{ $sublabel }}</p>
        </div>

        <p class="mec-priority-watch-card__description">{{ $description }}</p>

        @if(!empty($tags))
            <div class="mec-priority-watch-card__tags">
                @foreach($tags as $tag)
                    @php
                        $label = is_array($tag) ? ($tag['label'] ?? '') : $tag;
                        $variant = is_array($tag) ? ($tag['variant'] ?? 'neutral') : 'neutral';
                    @endphp
                    <span class="mec-priority-watch-card__tag mec-priority-watch-card__tag--{{ $variant }}">{{ $label }}</span>
                @endforeach
            </div>
        @endif
    </div>
</div>