@props([
    'price' => 0,
    'isCacheMiss' => false,
    'label' => 'Shipping:',
])

@php
    $formattedPrice = '$' . number_format($price, 2);

    // Styling for cache miss (orange and bold, works in both light and dark mode)
    $priceClass = $isCacheMiss
        ? 'font-bold text-orange-500 dark:text-orange-400'
        : 'text-gray-700 dark:text-gray-300';

    $titleText = $isCacheMiss
        ? 'Default rate (cache miss) - actual rate will be calculated'
        : '';
@endphp

<span class="inline-flex items-center gap-2">
    @if($label)
        <span class="text-gray-600 dark:text-gray-400">{{ $label }}</span>
    @endif
    <span
        class="{{ $priceClass }}"
        @if($isCacheMiss)
            title="{{ $titleText }}"
            data-cache-miss="true"
        @endif
    >
        {{ $formattedPrice }}
        @if($isCacheMiss)
            <span class="text-xs ml-1">*</span>
        @endif
    </span>
</span>