Status Bar code

@props([
    'items' => [],
])

@php
    /*
    | Horizontal status bar: a transparent strip of {icon} {value} pairs for
    | surfacing system or resource metadata on a single line.
    |
    | Each item accepts (all keys optional — provide an icon, a value, or both):
    |   - value (string)       primary text
    |   - icon (string)        Phosphor icon name
    |   - label (string)       muted prefix before the value
    |   - iconClass (string)   extra classes for the icon (e.g. tint)
    |   - title (string)       native hover tooltip for the segment
    |
    | Compose the slot instead of `items` for full control over each segment.
    |
    | Usage:
    |   <x-ui.status-bar :items="[
    |       ['icon' => 'cpu', 'value' => 'Ryzen 9950X', 'title' => 'Processor'],
    |       ['icon' => 'timer'],
    |       ['value' => '14 days uptime'],
    |   ]" />
    */
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-wrap items-center gap-x-6 gap-y-2 bg-transparent']) }}>
    @forelse ($items as $item)
        @if (isset($item['icon']) || isset($item['label']) || isset($item['value']))
            <div @class(['flex min-w-0 items-center gap-2 py-1 text-sm', 'cursor-default' => isset($item['title'])]) @isset($item['title']) title="{{ $item['title'] }}" @endisset>
                @isset($item['icon'])
                    <x-ui.icon :name="$item['icon']" size="sm" class="{{ trim('shrink-0 text-gray-400 dark:text-gray-500 '.($item['iconClass'] ?? '')) }}" />
                @endisset
                @isset($item['label'])
                    <span class="shrink-0 text-gray-500 dark:text-gray-400">{{ $item['label'] }}</span>
                @endisset
                @isset($item['value'])
                    <span class="min-w-0 truncate font-medium text-gray-900 dark:text-white">{{ $item['value'] }}</span>
                @endisset
            </div>
        @endif
    @empty
        {{ $slot }}
    @endforelse
</div>