{{-- Profile Info Field Component --}}

@props([
    'icon',
    'label',
    'dataField' => null,
    'id' => null,
    'skeletonWidth' => '100%',
    'colClass' => 'col-md-6'
])

@php
    $uniqueId = $id ?? 'field-' . uniqid();
@endphp

<div class="{{ $colClass }}">
    <div class="info-label">
        <i class="fas fa-{{ $icon }} me-2"></i>{{ $label }}
    </div>
    <div class="info-value">
        <div class="skeleton skeleton-text" style="width: {{ $skeletonWidth }};"></div>
        <span
            id="{{ $uniqueId }}"
            {{ $dataField ? "data-field={$dataField}" : '' }}
            class="actual-content"
        ></span>
    </div>
</div>