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

@php
    $tableClasses = 'w-full text-left';
    $wrapperClasses = 'bg-background-secondary rounded-xl border border-neutral/20 shadow-sm overflow-hidden';
    
    if ($responsive) {
        $wrapperClasses .= ' overflow-x-auto';
    }
@endphp

<div {{ $attributes->merge(['class' => $wrapperClasses]) }}>
    @if($loading)
        <div class="p-8 flex flex-col items-center justify-center gap-3">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            <p class="text-sm text-base/60">Loading data...</p>
        </div>
    @else
        <table class="{{ $tableClasses }}">
            @if(isset($head))
                <thead class="bg-neutral/5 {{ $stickyHeader ? 'sticky top-0 z-10' : '' }}">
                    <tr class="border-b border-neutral/10">
                        {{ $head }}
                    </tr>
                </thead>
            @endif

            @if(isset($body) && $body->isNotEmpty())
                <tbody class="divide-y divide-neutral/10">
                    {{ $body }}
                </tbody>
            @elseif($slot->isNotEmpty())
                <tbody class="divide-y divide-neutral/10">
                    {{ $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 w-14 h-14 rounded-xl bg-neutral/10">
                                    <x-dynamic-component :component="$emptyIcon" class="size-7 text-base/40" />
                                </div>
                                <p class="text-sm text-base/60">{{ $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>