@php
    $features = [
        'cpu' => ['icon' => 'cpu.svg', 'label' => 'CPU', 'unit' => 'vCore'],
        'ram' => ['icon' => 'ram.svg', 'label' => 'RAM', 'unit' => 'GB'],
        'disk' => ['icon' => 'storage.svg', 'label' => 'Disk', 'unit' => 'GB'],
        'gpu' => ['icon' => 'video.svg', 'label' => 'GPU', 'unit' => 'GB'],
        'ip' => ['icon' => 'network.svg', 'label' => 'IP Public', 'unit' => 'IP'],
        'bandwidth' => ['icon' => 'bandwidth.svg', 'label' => 'Băng thông', 'unit' => 'GB']
    ];
@endphp

<div x-data="{ loading: true }" data-skeleton-id="vps-features">
    <!-- Skeleton Loading for VPS Features -->
    <template x-if="loading">
        <div class="space-y-3 animate-pulse">
            @foreach (range(1, count($features)) as $i)
                <div class="flex items-center space-x-3">
                    <div class="w-5 h-5 bg-gray-200 rounded"></div>
                    <div class="flex items-center gap-2">
                        <div class="h-4 bg-gray-200 rounded w-16"></div>
                        <div class="h-4 bg-gray-200 rounded w-12"></div>
                    </div>
                </div>
            @endforeach
        </div>
    </template>

    <!-- Actual VPS Features -->
    <template x-if="!loading">
        <div class="space-y-3">
            @foreach ($features as $key => $feature)
                @if ($product->$key)
                    <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('/icon/' . $feature['icon']) }}" alt="{{ $feature['label'] }}" class="w-5 h-5">
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-md font-semibold">{{ $feature['label'] }}:</span>
                            <div class="font-semibold text-blue-800 h-4">
                                <span>{{ $product->$key }}</span>
                                <span class="text-xs text-blue-600">{{ $feature['unit'] }}</span>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </template>
</div>