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

@php
    // LucentUI table classes
    $tableClasses = 'w-full text-sm text-left';
    if ($striped) {
        $tableClasses .= ' [&_tbody_tr:nth-child(even)]:bg-background-secondary/50';
    }
    if ($hoverable) {
        $tableClasses .= ' [&_tbody_tr]:hover:bg-background-secondary/70 [&_tbody_tr]:transition-colors';
    }
    if ($compact) {
        $tableClasses .= ' [&_th]:py-2 [&_td]:py-2';
    } else {
        $tableClasses .= ' [&_th]:py-3 [&_td]:py-3';
    }
    
    $wrapperClasses = 'bg-background border border-neutral rounded-lg shadow-sm';
    
    if ($responsive) {
        $wrapperClasses .= ' overflow-x-auto';
    }
@endphp

<div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
    @if($loading)
        <div class="flex flex-col items-center justify-center gap-3 p-8">
            <x-ri-loader-5-fill class="size-8 animate-spin text-primary" />
            <p class="text-sm text-base/60">Loading data...</p>
        </div>
    @else
        <table class="{{ $tableClasses }}">
            @if(isset($head))
                <thead class="bg-background-secondary/50 border-b border-neutral text-xs uppercase text-base/60" @if($stickyHeader) style="position: sticky; top: 0; z-index: 10;" @endif>
                    <tr>
                        {{ $head }}
                    </tr>
                </thead>
            @endif

            @if(isset($body) && $body->isNotEmpty())
                <tbody class="divide-y divide-neutral/50">
                    {{ $body }}
                </tbody>
            @elseif($slot->isNotEmpty())
                <tbody class="divide-y divide-neutral/50">
                    {{ $slot }}
                </tbody>
            @else
                <tbody>
                    <tr>
                        <td colspan="100" class="px-5 py-12">
                            <div class="flex flex-col items-center justify-center gap-3 text-center">
                                <div class="flex items-center justify-center size-14 bg-background-secondary rounded-lg">
                                    <x-dynamic-component :component="$emptyIcon" class="size-7 text-base/50" />
                                </div>
                                <p class="text-sm text-base/60">{{ $emptyMessage }}</p>
                            </div>
                        </td>
                    </tr>
                </tbody>
            @endif

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