{{--
    Info Row / Key-Value Pair Component - AdminLTE style
    
    Usage:
    <x-proxmox::ui.info-row label="IP Address" value="192.168.1.1" />
    <x-proxmox::ui.info-row label="Status" :copyable="true">
        <x-proxmox::ui.badge variant="success">Active</x-proxmox::ui.badge>
    </x-proxmox::ui.info-row>
--}}

@props([
    'label',
    'value' => null,
    'copyable' => false,
    'icon' => null,
    'muted' => false,
])

<style>
    .info-row-lte {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--lte-border-color, #dee2e6);
    }
    .info-row-lte:last-child {
        border-bottom: none;
    }
    .info-row-lte-label {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.875rem;
        color: var(--lte-secondary, #6c757d);
    }
    .info-row-lte-label svg {
        width: 1rem;
        height: 1rem;
    }
    .info-row-lte-value {
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }
    .info-row-lte-value-text {
        font-size: 0.875rem;
        font-weight: 500;
        color: #212529;
    }
    .info-row-lte-value-text-muted {
        color: var(--lte-secondary, #6c757d);
    }
    .info-row-lte-copy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: var(--lte-border-radius, 0.375rem);
        color: #adb5bd;
        cursor: pointer;
        transition: all var(--lte-transition-speed, 0.3s) ease;
    }
    .info-row-lte-copy-btn:hover {
        background-color: #f8f9fa;
        color: var(--lte-primary, #0d6efd);
    }
    .info-row-lte-copy-btn svg {
        width: 1rem;
        height: 1rem;
    }
    /* Dark mode */
    .dark .info-row-lte {
        border-bottom-color: #374151;
    }
    .dark .info-row-lte-label {
        color: #9ca3af;
    }
    .dark .info-row-lte-value-text {
        color: #f3f4f6;
    }
    .dark .info-row-lte-value-text-muted {
        color: #9ca3af;
    }
    .dark .info-row-lte-copy-btn {
        color: #6b7280;
    }
    .dark .info-row-lte-copy-btn:hover {
        background-color: #374151;
    }
</style>

<div {{ $attributes->class(['info-row-lte']) }}>
    <div class="info-row-lte-label">
        @if($icon)
            <x-dynamic-component :component="$icon" />
        @endif
        <span>{{ $label }}</span>
    </div>
    <div class="info-row-lte-value">
        <span class="info-row-lte-value-text {{ $muted ? 'info-row-lte-value-text-muted' : '' }}">
            {{ $value ?? $slot }}
        </span>
        @if($copyable && $value)
            <button 
                type="button"
                x-data="{ copied: false }"
                @click="
                    navigator.clipboard.writeText('{{ $value }}');
                    copied = true;
                    setTimeout(() => copied = false, 2000);
                "
                class="info-row-lte-copy-btn"
                title="Copy to clipboard"
            >
                <x-ri-file-copy-line x-show="!copied" />
                <x-ri-check-line x-show="copied" x-cloak style="color: var(--lte-success, #198754);" />
            </button>
        @endif
    </div>
</div>