@props([
    'striped' => false,
    'hoverable' => true,
    'compact' => false,
    'responsive' => true,
    'stickyHeader' => false,
    'emptyMessage' => 'No data available',
    'emptyIcon' => 'ri-inbox-line',
    'loading' => false,
])

@php
    // AdminLTE table classes
    $tableClasses = 'lte-table';
    if ($striped) {
        $tableClasses .= ' lte-table-striped';
    }
    if ($hoverable) {
        $tableClasses .= ' lte-table-hover';
    }
    
    $wrapperClasses = 'lte-card';
    
    if ($responsive) {
        $wrapperClasses .= ' overflow-x-auto';
    }
@endphp

<div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
    @if($loading)
        <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;">
            <div class="lte-spinner"></div>
            <p class="lte-text-muted" style="font-size: 0.875rem;">Loading data...</p>
        </div>
    @else
        <table class="{{ $tableClasses }}" style="width: 100%;">
            @if(isset($head))
                <thead @if($stickyHeader) style="position: sticky; top: 0; z-index: 10;" @endif>
                    <tr>
                        {{ $head }}
                    </tr>
                </thead>
            @endif

            @if(isset($body) && $body->isNotEmpty())
                <tbody>
                    {{ $body }}
                </tbody>
            @elseif($slot->isNotEmpty())
                <tbody>
                    {{ $slot }}
                </tbody>
            @else
                <tbody>
                    <tr>
                        <td colspan="100" style="padding: 3rem 1.25rem;">
                            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center;">
                                <div class="lte-info-box-icon lte-bg-light rounded" style="width: 56px; height: 56px;">
                                    <x-dynamic-component :component="$emptyIcon" class="size-7 lte-text-muted" />
                                </div>
                                <p class="lte-text-muted" style="font-size: 0.875rem;">{{ $emptyMessage }}</p>
                            </div>
                        </td>
                    </tr>
                </tbody>
            @endif

            @if(isset($foot))
                <tfoot class="bg-neutral/5 border-t border-neutral/10">
                    {{ $foot }}
                </tfoot>
            @endif
        </table>
    @endif
</div>