@props([
    'tone' => 'gold',
])

@php
    $toneClass = match ($tone) {
        'alert' => 'tv-pano-meter--alert',
        'blue' => 'tv-pano-meter--blue',
        'success' => 'tv-pano-meter--success',
        'warn' => 'tv-pano-meter--warn',
        default => 'tv-pano-meter--gold',
    };
@endphp

<div {{ $attributes->merge(['class' => "tv-pano-meter {$toneClass}"]) }}>
    <div class="tv-pano-meter__bar">
        <div class="tv-pano-meter__fill"></div>
        <div class="tv-pano-meter__overlay">
            {{ $slot }}
        </div>
    </div>
    @isset($footer)
        <div class="tv-pano-meter__footer">{{ $footer }}</div>
    @endisset
</div>